Hello @celeryuk
I tested a link you provided on my phones. Everything works well on the Android phone. This issue is specific for the iPhone. Maybe Safari browser or iOS can not work with the float
or margin
properties properly. Try this CSS code to use padding
instead of float
and margin
.
.um-field.um-field-radio label.um-field-radio {
float: none;
width: 100%;
}
.um-field.um-field-radio label.um-field-radio > * {
display: inline-block;
float: none;
margin: 0px;
}
.um-field.um-field-radio label.um-field-radio > span.um-field-radio-option {
padding-left: 30px;
}
<b style=”font-weight:normal;” id=”docs-internal-guid-da0e7f65-7fff-c40e-1f81-6d847d90ec28″><span style=”font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;”>You can override the style by adding CSS code to the field “Additional CSS” on </span><span style=”font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:italic;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;”>wp-admin > Appearance > Customize > Additional CSS</span><span style=”font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;”>.</span></b>
Regards
thank you yuriinalivaiko
I have tried that and it’s slightly better but it’s still not right.
take a look https://ibb.co/pPk2b6C
Any ideas?
Many thanks
Bruce
Hi @celeryuk
I checked again the link you provided. Everything works well on any device and browser except the iPhone. Unfortunately, I can not investigate styles on iPhone. We can only try another CSS code and hope that this will help.
.um-field.um-field-radio label.um-field-radio {
float: none;
width: 100%;
}
.um-field.um-field-radio label.um-field-radio > input {
border: none;
height: 0px;
margin: 0px;
padding: 0px;
width: 0px;
}
.um-field.um-field-radio label.um-field-radio > span {
display: inline;
float: none;
margin: 0px;
}
.um-field.um-field-radio label.um-field-radio > span.um-field-radio-option {
padding-left: 30px;
}
Regards
legend! thank you, that worked. very kind of you to help. all the best.