Archived topic
css/layout issue when tag line is quite long, on mobile.
7 replies · Started by entiredigital on December 16, 2019
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!
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.
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
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.
Ah okay, I didn't notice those options, thank you!
You're welcome :)
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.
In the Header Element - increase the Bottom Padding for Mobile.
