What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.
At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.
We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.
Header text is being cut off on mobileAsked by EMCA11939 on December 08, 2016 at 07:58 PM
My header looks OK on a web page (though too much space at the top) but on a mobile phone the text is cut off. The site supplied needs to be seen on a mobile screen. Any suggestions?
Many thanks, Barb
The title now works fine when a mobile is held vertically (any size), but:
- When a mobile phone is held vertically it cuts off the right side of all fields
- When a mobile phone is held horizontally the title is cut in half horizontally but the fields show fine
- on a tablet the title is cut in half horizontally whether it is held horizontally or vertically, but the fields are fine.
I’m using your mobile responsive widget.
This is the only form I’ve had this problem with. Any thoughts?
Many thanks for any light you can shed.
Your form is not displaying in a mobile friendly manner due to the custom CSS that you have previously applied to your form:
width : 400px!important;
This code is hard-coding your form to have a width of 400 pixels. As such, your form will always look bad on any screen where it has less than 400 pixels of horizontal space, such as many mobile phones in portrait mode (phone held vertically).
Please remove that section of CSS from your form in order for it to start being mobile responsive.
If by using that code you were trying to limit the form to take no more than 400 pixels of width, then you may want to use this mobile friendly code instead:
max-width : 400px;
Please try it out, and let us know how it goes.
That did it. Many thanks for your speedy reply and your expertise.
The title is still getting cut in half horizontally when a mobile is held horizontally (phone or tablet), but hey, they will just need to hold it vertically or use their imagination if they really want to read the title.
Best regards, Barb
That issue can still be fix, Barb.
Please try this one, remove the Mobile Responsive widget below your form and add it again but this time put it on the top of your form. See image below:
Hope that works. Please try it and let us know how it goes. Thank you.
Perfect! I learn something from you folks every time. Thank you.
(Now all I need are people to register for the benefit.)
Thanks for keeping us posted, Barb. And thanks for the kind remark.
Should you have other questions or concerns, please do not hesitate to let us know.