-
thealgolabAsked on November 13, 2018 at 3:02 PM
Hi: You will note on the screen shot attached that the capital field, the Leverage buttons, and the performance results are all in 3 columns (I used SHRINK for force them to stay on the same line). On mobile, then line up vertically in a column, and do not stay in a horizontal row.
Thanks
Page URL: https://form.jotform.com/83143462193253 -
Nik_CReplied on November 13, 2018 at 5:03 PM
Please try adding this CSS to your Custom CSS Field:
@media only screen and (max-device-width : 667px) {
li#id_43 {
width: 100px!important;
}
li#id_41 {
width: 100px;
}
li#id_55 {
width: 152px;
}
}
That should handle how the fields are showing when viewed on mobile:
Please try and let us know how it worked.
Thank you!
-
thealgolabReplied on November 13, 2018 at 5:09 PM
Thanks, but this did not seem to work:
-
Support_Management Jotform SupportReplied on November 13, 2018 at 7:14 PM
How about you try the following codes? I made some minor modifications to the codes provided by my colleague:
@media only screen and (max-device-width : 667px){
li#id_43 {
width : 100px;
}
li#id_41 {
width : 112px;
margin-left : -24px;
}
li#id_55 {
width : 140px;
margin-left : -30px;
}
}
Due to the constricted viewport area, I had to change some of the width values and added some margin adjustments. If these codes still won't work, I recommend you test your form with an actual mobile phone, see how it turned out, and if it's still not rendering in three columns, kindly get back to us with the make and model of the phone you used for the test, along with the browser.