Improve legibility on radio buttons

  • Resolved Pablo

    (@pablomassa)


    3 years, 7 months ago

    Hi, I find that in a list of radio buttons, if the radio button text is longer than the container, it start a new line below the radio button, instead of put a margin in the second line to make it clear that the texts belongs to the radio button (think a bullet list element behavior).

    Hope I explain it better with this screenshot: https://imgur.com/a/CMP9GWa

    This fix will improve the reading experience of the form.

    I guess it happens with check boxes too (didn’t test it).

    Hope can help.

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

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi @pablomassa,

    No problem! To fix this, please try the following custom CSS snippet:

    div.wpforms-container .wpforms-form .wpforms-field ul li {
    display: flex;
}
div.wpforms-container .wpforms-form .wpforms-field ul li label {
    line-height: 1.7;
}
div.wpforms-container .wpforms-form .wpforms-field ul li input {
    transform: translateY(5px);
}

    And in case it helps, here’s a tutorial from WPBeginner on how to add custom CSS like this to your site.

    Hope this helps!

    Thread Starter Pablo

    (@pablomassa)

    It worked! Thanks!

    Look how much improves legibility/accessibility: https://imgur.com/a/eAMAmfB

    Hope you consider apply the fix to the plugin itself in some capacity and improve the experience of many other persons.

    Hope can help with the report.

    Thanks.

    Hi @pablomassa,

    I’m happy to hear that snippet worked out for you. If you’d like more help with using WPForms Lite, please feel free to reach out.

    Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Improve legibility on radio buttons’ is closed to new replies.