Headers do not size properly on Mobile View

[Solidwebservice]

I have a couple of instances where headers do not display properly for mobile view (see attached images):

1. H1 header (U.S. Inspection) on home page - http://usindt.staging.wpengine.com/
2. H1 header - http://usindt.staging.wpengine.com/what-we-do/radiographic-testing/
3. Text beneath images scaling very small on home page - Heat Treatment Services, etc) - http://usindt.staging.wpengine.com/
   

[christian]

Hey @Solidwebservice,

You will need to make the large text smaller and small text larger in mobile screen sizes. I see you’re using regular HTML text elements though so you’ll need custom CSS to override the font size every time, it’s tricky to set up and custom coding is not included in our product support.

I’d recommend you use the Headline and Text elements and then use either one of the Responsive Text methods below.

1. The Responsive Text feature.

2. The fluid text font size setup.

Just so you know, another advantage of using the Headline Element is it has 3 parts. 1 Primary Text, 1 Secondary and 1 Graphic.

So you won’t set things up over and over, just also know that you can set Element Defaults. You can read more about that in our Template Manager documentation

Hope that helps.