[Resolved] css/layout issue when tag line is quite long, on mobile.

[entiredigital]

Hello,

using the “Mellow” fresh configuration on a fresh local install, latest WP 5.3.1 and latest GP 241 adn GPPremium 191.

Happen to have a pretty long tag line and noticed this:

Basically the tag line pushes the “= Menu” down but not the rest, so we have overlapping.

– may I expect a global fix?

– I could do it myself like many other mods I ought to do, so I’m asking if there is a proper-developer way to a) override the whole css or b) add my own rules at the bottom of the theme’s predefined. I thought of a classic ‘wp_head’ injection of inlined style or enqueuing my own style.css via a plugin or via the Appearance > Additional CSS dashboard panel? DO you suggest a best way to do this ala GP way?

Thanks!

[David]

Hi there,

any chance you can link me to that Post so i can see whats creating the issue – it may be related to the CSS Mellow applies – so could be a case of editing the CSS that the Site Import added to the Customizer > Additional CSS.

You can edit your original topic and use the Site URL field to share privately.

[entiredigital]

Ok I updated the post with the website information.

But as I said I was referring to a local installation, in the production one there is AdSense autoads which might spawn adunits here and there disturbing the layout.

Thank you

[Tom]

Since the tagline is increasing the header height so much, you need to increase the “Offset Site Header Height” option on mobile in your Element settings: https://docs.generatepress.com/article/header-element-overview/#offset-site-header-height

Increasing that value will prevent the overlap you’re seeing.

[entiredigital]

Ah okay, I didn’t notice those options, thank you!

[Tom]

You’re welcome 🙂

[entiredigital]

Excuse me, I’ve encountered this issue again, but this time that options doesn’t seem to do the trick:

https://www.style24.it/coronavirus-leonardo-dicaprio-donazione/

on narrow devices some text goes behind page content:

Default in desktop is 170px, I tried 100px or 200px for mobile (by clicking the small cellphone icon) in Posts Heading elements Site Header, but it looks the same.

[David]

In the Header Element – increase the Bottom Padding for Mobile.

[Author]

Posts