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

    Image Radio Buttons: How can I set the two column on mobile?

    Asked by art_crate on January 12, 2017 at 06:07 PM

    Hello,

     

    A few of my survey questions are being displayed in one column on mobile.

    I would like them all to be 2 columns like question 1. (See attached)

    Questions that are appearing as 1 column on mobile:

    2,4,7,8,9,10

     

    Thanks!

    Page URL:
    https://form.jotform.com/70091287457966

    Screenshot
  • Profile Image
    JotForm Developer

    Answered by Helen on January 13, 2017 at 02:18 AM

    Hi,

    Thank you for contacting us.

    I am working on your requirement and get back to you soon.

    Thank you!

  • Profile Image

    Answered by art_crate on January 13, 2017 at 02:26 AM

    Thank you so much Helen, please let me know if you have any questions. 

  • Profile Image
    JotForm Developer

    Answered by Helen on January 13, 2017 at 03:35 AM

    Hi,

    Thank you for contacting us.

    You must inject this custom CSS codes into the widget:

    /* ----------- iPhone 6 ----------- */

     

    /* Portrait and Landscape */

    @media only screen 

      and (min-device-width: 375px) 

      and (max-device-width: 667px) 

      and (-webkit-min-device-pixel-ratio: 2) { 

    ul#images_button_container {

        width: 390px !important;

        margin-left: -33px !important;

    }

     

    }

    /* ----------- Galaxy S5 ----------- */

     

    /* Portrait and Landscape */

    @media screen 

      and (device-width: 360px) 

      and (device-height: 640px) 

      and (-webkit-device-pixel-ratio: 3) {

    ul#images_button_container {

        width: 390px !important;

        margin-left: -18px !important;

    }

     

    }

     

    /* ----------- iPhone 5 and 5S ----------- */

     

    /* Portrait and Landscape */

    @media only screen 

      and (min-device-width: 320px) 

      and (max-device-width: 568px)

      and (-webkit-min-device-pixel-ratio: 2) {

    ul#images_button_container {

        width: 313px !important;

        margin-left: -21px !important;

    }

    li {

        margin-right: -33px !important;

    }

    }

    I hope this code fix your issue. Here are examples:

    For iPhone5:

    For Galaxy s5:

    Please follow these steps for injecting Custom CSS codes into your widget:

    1. Click "Wizard" button on your widget.

    2. Go to Custom CSS tab and paste CSS codes to this field.

    If you have any questions or issue, feel free contact us.

  • Profile Image

    Answered by art_crate on January 13, 2017 at 05:55 PM

    Hi Helen,

     

    That worked perfect for my image radio buttons.

     

    How would I do this for my image check box questions? I have a few of those and they are showing in one column.

     

    Please let me know.

    Best,

    Chris

  • Profile Image
    JotForm Developer

    Answered by Helen on January 14, 2017 at 03:14 AM

    Hi Chris,

    You must inject these CSS codes into your form for fixing your checkbox questions alignment. Here are CSS codes:

    /* ----------- iPhone 6 ----------- */

     

     

     

    /* Portrait and Landscape */

     

    @media only screen 

     

      and (min-device-width: 375px) 

     

      and (max-device-width: 667px) 

     

      and (-webkit-min-device-pixel-ratio: 2) {

        

     

    span.form-checkbox-item {

        width: 185px !important;

        margin-left: 7px !important;

        margin-right: -22px !important;

    }

    }

     

    /* ----------- Galaxy S5 ----------- */

     

     

     

    /* Portrait and Landscape */

     

    @media screen 

     

      and (device-width: 360px) 

     

      and (device-height: 640px) 

     

      and (-webkit-device-pixel-ratio: 3) {

     

    span.form-checkbox-item {

        margin-right: 24px !important;

        width: 146px !important;

        margin-left: -2px !important;

    }

    }

     

     

     

    /* ----------- iPhone 5 and 5S ----------- */

     

     

     

    /* Portrait and Landscape */

     

    @media only screen 

     

      and (min-device-width: 320px) 

     

      and (max-device-width: 568px)

     

      and (-webkit-min-device-pixel-ratio: 2) {

     

    span.form-checkbox-item {

        width: 114px !important;

        margin-left: -18px !important;

        margin-right: 62px !important;

    }

     

    }

    Here is guide help to you for injecting CSS codes: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Here is a result example:

    Please let us know if you have any questions or issue.

  • Profile Image

    Answered by art_crate on January 14, 2017 at 03:23 AM

    That worked!


    Thank you so much