UM Radio (Roles) allignment

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.