Mobile responsiveness of Radio Buttons and Button Checkboxes

  • 2paulhodge
    Asked on March 18, 2025 at 12:23 PM

    Hi, please share how we can make this form mobile responsive. Currently, it doesn't show the text and cuts off the text on phones. It is for both Radio Buttons and Button Checkboxes.

    Thanks

    https://form.jotform.com/250746560897470

  • Reban JotForm Support
    Replied on March 18, 2025 at 2:28 PM

    Hi 2paulhodge,

    Thanks for reaching out to Jotform Support. It is easy to make your Button Radios and Button Checkboxes widgets responsive on a mobile screen. You can achieve this by injecting custom CSS into the widget. Let me show you how:

    1. First, copy this code:

    @media only screen and (max-width: 480px) {

    label {
    margin-left: -220px !important;
    font-size: 13px ! important;
    }
    }

    2. In your Form Builder, click the Paint Roller icon located at the upper-right corner of your page.

    3. In the Widget Settings, go to the Custom CSS tab and paste the code in the last row of the code area.

    4. Click on Update and repeat the same steps for your other widgets.

    Mobile responsiveness of Radio Buttons and Button Checkboxes Image 1 Screenshot 30

    That's it. Test your form, and you'll see that the Button Radios and Button Checkboxes widgets are now responsive on mobile screens. Check out the screencast below for the result:

    Mobile responsiveness of Radio Buttons and Button Checkboxes Image 2 Screenshot 41

    Give it a try and let us know how it goes.

  • 2paulhodge
    Replied on March 18, 2025 at 3:49 PM

    Thanks but this doesn't seem to work. I've applied multiple codes already before reaching out.

    Can you please apply the code first on our form to see the difference for both radio buttons and button checkboxes. Your help is really appreciated!

  • 2paulhodge
    Replied on March 18, 2025 at 3:52 PM

    Please discard above. I see the issue now and it's working fine.

    Thank you for your support.