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

  • Profile Image
    art_crate
    Asked 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!

  • Profile Image
    Helen
    Answered 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
    art_crate
    Answered on January 13, 2017 at 02:26 AM

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

  • Profile Image
    Helen
    Answered 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
    art_crate
    Answered 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
    Helen
    Answered 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
    art_crate
    Answered on January 14, 2017 at 03:23 AM

    That worked!


    Thank you so much