Content Shrinking in Header

Hi there,

I’m building at new site here: http://hangerlaw.wpengine.com/

The logo and content in the header section shrinks when in tablet and mobile view. I cannot find the proper setting to make this stop. Any ideas?

The content in the rest of the page looks correct.

Here it is looking good on desktop:

But the logo, headline, and button are shrunken on mobile:

Hello @jiggyjargon,

Thanks for the very detailed post information. I have checked your site and I found out that you have inserted a <p> tag in a heading <h2> tag which is not valid.
5FoPPnjFQhiB3pZx686DsA

You already have set a heading tag:
qKZFQnN0SkuucHtZcOto4w

So, you no longer have to insert <p> tags in your text content. Just this:

Out of confusion, <br />
find <span style="color: #a8925e;">clarity.</span>

Please have this applied to other headline elements as well as see how it goes.

Okay, I’ve removed the <p>tags from my headline elements. Unfortunately, that did not change how the content in the header is behaving. Take a look by dragging your browser size around: http://hangerlaw.wpengine.com/

Hello @jiggyjargon,

In your custom header, you will have to set the following:
1.) The maximum width of the container is 88%
2.) The Self Flex will be “Fill Space Equally”
3.) And then set the left and right margin to “Auto”.

In your page, since you have turned OFF the global container, you will have to set the width to at least 88% since this is the width of the row containers.

Hope this helps.

After some tinkering, I discovered the issue. I imported one of Themeco’s header templates which used calc(5vw + 28px) in the Base Font Size field for the headline and button header elements. I adjusted the +px number to my liking and I’m all set now, thanks!

Hi @jiggyjargon,

Great that it resolved now.

Thanks

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.