-
blitztrainingAsked on November 1, 2016 at 10:54 PM
Hi There,
I created a form and embedded w/ the responsive widget. However, when I load the page on my iPhone 6 it just looks like a miniature form and is VERY hard to read and fill out. I can't have customers filling out a form on their phones like this.
Please help!
Bryan
-
emilyReplied on November 2, 2016 at 5:00 AM
For your form to be mobile friendly, there are few options you can implement. One of the option is to make the form responsive.
Here is the guide that will help you solve this issue.
https://www.jotform.com/help/322-How-to-make-mobile-friendly-forms-on-JotForm
I hope it helps. If the problem continues, please contact us again.
Thanks.
-
blitztrainingReplied on November 2, 2016 at 7:44 AMThat is with it responsive. Both with the design option and responsive widget, it came out that way.
I need this done as soon as possible. I can hardly read it the way it is.
Sent from my iPhone
... -
emilyReplied on November 2, 2016 at 8:52 AM
Have you tried altering the height and width of your text boxes, drop downs and sizes of your labels?
If not, kindly inject the CSS codes below. You can alter the numbers according to your demand.
.form-textbox {
height : 30px;
width : 200px;
}
.form-dropdown {
height : 30px;
width : 100px;
}
.form-label.form-label-top {
font-size : 20px;
}
.form-sub-label {
font-size : 20px;
}
#text_74 {
font-size : 30px;
}
Here is the guide showing how to inject CSS codes.
https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes
If the problem still continues, please let us know.
Thanks.
-
blitztrainingReplied on November 2, 2016 at 9:44 AMI actually got it to work in a new page. However, now I'm having trouble with the width of the form. It is touching the right side of the screen, but I would like a little space on the side. Padding doesn't seem to work.
Sent from my iPhone
... -
BJoannaReplied on November 2, 2016 at 1:25 PM
I have tested your form on my Samsung Galaxy S4 and on iPhone simulator, but I was not able to replicate mentioned issue. Your form is positioned correctly on my end.
Can you please try to add this code and see if it helps:
@media (max-width: 480px) {
.form-all { padding:10px !important; }
}
How to Inject Custom CSS Codes
Hope this will help. Let us know if you need further assistance.