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

Home Forums Support css/layout issue when tag line is quite long, on mobile.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1105715
    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!

    #1105895
    David
    Staff
    Customer Support

    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.

    #1106096
    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

    #1106335
    Tom
    Lead Developer
    Lead Developer

    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.

    #1106467
    entiredigital

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

    #1107033
    Tom
    Lead Developer
    Lead Developer
    #1224780
    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.

    #1225397
    David
    Staff
    Customer Support

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

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.