-
art_crateAsked on January 12, 2017 at 6: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 -
HelenReplied on January 13, 2017 at 2:18 AM
Hi,
Thank you for contacting us.
I am working on your requirement and get back to you soon.
Thank you!
-
art_crateReplied on January 13, 2017 at 2:26 AM
Thank you so much Helen, please let me know if you have any questions.
-
HelenReplied on January 13, 2017 at 3: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.
-
art_crateReplied on January 13, 2017 at 5: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
-
HelenReplied on January 14, 2017 at 3: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.
-
art_crateReplied on January 14, 2017 at 3:23 AM
That worked!
Thank you so much