How to adjust the radio buttons to a vertical order on mobile devices?

  • LMBE90
    Asked on August 20, 2016 at 4:41 PM

    Hi there

    even after reading through several threads in the forum, I couldn't find an answer to my problem I am having with a radio button element in my form. 

    For design reasons, I did put them horizontal by making 4 columns. This looks great on a desktop, but needs to be adjusted on mobile phones to a vertical order to avoid the mess/collision you can see in the screen shot attached. 

    All other elements are responsive, it's just this part that doesnt work on mobiles. Is there a CSS injection to solve my problem?

     

    Thanks for the help :)

    Gabriel

     

     

     

     

     How to adjust the radio buttons to a vertical order on mobile devices? Image 1 Screenshot 20

    Jotform Thread 911645 Screenshot
  • Welvin Support Team Lead
    Replied on August 20, 2016 at 7:16 PM

    You can inject the following custom CSS codes to your form to list the items down:

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

    .form-multiple-column[data-columncount="4"] .form-radio-item, .form-multiple-column[data-columncount="4"] .form-checkbox-item {

        width: 100% !important;

    }

    }

    Please follow the steps from this guide to inject: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes. Add the custom CSS codes to the bottom if you have an existing CSS in the area.

  • LMBE90
    Replied on August 20, 2016 at 7:52 PM

    Dear Welvin

    I am really glad for the help. I did inject your CSS codes and it works!

    thank you so much!

    Gabriel