Header text is being cut off on mobile

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

Hello Barb,

Please try adding this custom CSS code to your form: 

@media only screen and (max-width: 480px) { 

#cid_32 { 

margin-top : 50px !important; 

} 

} 

Here's a guide on: How-to-Inject-Custom-CSS-Codes

Hope that helps. Let us know how it goes. Thank you.

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.
Thanks, Barb
...

Your form is not displaying in a mobile friendly manner due to the custom CSS that you have previously applied to your form:

.form-all {
    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:

.form-all {
    max-width : 400px;
}

Please try it out, and let us know how it goes.

Hi 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
...

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.)
Barb
...

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.