UM Radio (Roles) allignment

  • Resolved celeryuk

    (@celeryuk)


    1 year ago

    Hello, the text for the radio buttons is misaligned on mobile view. it’s fine for Desktop. see here: https://ibb.co/vhvv8nX

    Any ideas how to make the text align? thanks

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Support yuriinalivaiko

    (@yuriinalivaiko)

    1 year ago

    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

    Thread Starter celeryuk

    (@celeryuk)

    1 year ago

    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

    Plugin Support yuriinalivaiko

    (@yuriinalivaiko)

    1 year ago

    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

    Thread Starter celeryuk

    (@celeryuk)

    1 year ago

    legend! thank you, that worked. very kind of you to help. all the best.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘UM Radio (Roles) allignment’ is closed to new replies.

Tags