- EMCA11939Asked 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, BarbPage URL:
- JotForm SupportJohn_BensonAnswered on December 09, 2016 at 12:37 AM
- EMCA11939Answered on December 09, 2016 at 09:44 AMThe 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.
- BorisAnswered on December 09, 2016 at 11:30 AM
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.
- EMCA11939Answered on December 09, 2016 at 02:44 PMHi Boris,
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
- JotForm SupportJohn_BensonAnswered on December 09, 2016 at 04:12 PM
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.
- EMCA11939Answered on December 09, 2016 at 06:44 PMPerfect! I learn something from you folks every time. Thank you.
(Now all I need are people to register for the benefit.)
- JotForm SupportliyamAnswered on December 09, 2016 at 11:41 PM
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.