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

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!

Hi,

Thank you for contacting us.

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

Thank you!

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

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.

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

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.

That worked!

Thank you so much