What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

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

    Asked by LMBE90 on August 20, 2016 at 04: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

     

     

     

     

     

    Screenshot
    radio buttons horizontal
  • Profile Image
    JotForm Support

    Answered by Welvin on August 20, 2016 at 07: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.

  • Profile Image

    Answered by LMBE90 on August 20, 2016 at 07: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