-
kenherr46Asked on September 6, 2019 at 1:07 AM
I am working on a form that needs to be usable on both desktop and mobile devices. I am finding that fields I create and are only 10 characters wide display on a smartphone filling the entire width of the screen.
How do I optimize my form so it will usable on a smartphone as well as on a desktop?
-
aybukeceylan JotForm UI DeveloperReplied on September 6, 2019 at 8:33 AM
I've checked your form on my device and fields are looking fine.
In mobile view, I noticed the following problems:
1. The address field title is on the right top of the field.
I move the title to the left corner of the field and it looks like below:
2. The buttons of the Button Radios Widget are not responsive for mobile. The second button's texts are missing.
I fixed the buttons like below:
You can make the arrangements with CSS using Advanced Designer.
Please follow the instructions below:
1. Click on the For Designer icon and then click on CSS tab.
2. Please paste the following CSS code to CSS Editor.
@media screen and (max-width: 480px), screen and (max-device-width: 767px){
.form-label-left, .form-label-right {
text-align : left !important;
}
.wrapperButtonRadio label {
display : block !important;
}
}
Advanced CSS Editor view is below:
Then please click on the Save button.
If your problem still occurring, please send us screenshots of the problem.
We will be waiting for your response.
-
kenherr46Replied on September 6, 2019 at 11:35 PM
My initial concern was how the Student Name and Goal number of laps were extending fully across the screen. No matter how I adjusted the text field length property in these fields they still were full width. See the attached screenshot from an Android phone.
-
jherwinReplied on September 6, 2019 at 11:52 PM
Please use these CSS codes to resize those fields in mobile view:
@media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){
input#input_97 {
width: 150px!important;
}
input#input_99 {
width: 150px!important;
}
input#input_111{
width: 150px!important;
}
input#input_108{
width: 150px!important;
}
}Guide: How-to-Inject-Custom-CSS-Codes
Please give it a try and let us know how it goes.