Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] Customize Global Layout

Home Forums Support Customize Global Layout

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #448626
    Gabriele

    Hi,
    I’m trying to customize the global layout of GeneratePress for my needs, but I’m encountering some problems and I need a little help if possible.
    What I’m trying to achieve is a fullwidth container layout with a contained inner content maximum width, that when scaling down has a left/right padding set that changes from desktop, to tablet, to mobile.
    With the customizer settings and a little bit of CSS I’m almost there but I can’t understand how to avoid the content padding to apply also when the maximum contained width threshold is reached.
    I hope this makes sense, in others words I want the inner content container to be maximum 1248px (without any padding) and scale it down when the viewport is smaller, keeping a left/right padding of 80px for desktop, 40px for tablet and 20px for mobile.
    Please, can you help me??

    It would be nice if GeneratePress could have more layout options for achieving, for example, this specific layout without a lot of CSS hacks, as, for now, I must set content paddings separately for every element (header, menu, sticky menu, page header and content and footer) and with all the media queries for each viewport.

    Thanks,
    Gabriele

    GeneratePress 2.0
    GP Premium 1.5.6
    #448736
    Leo
    Staff
    Customer Support

    Hi there,

    We have plans to add more responsive options but also want to avoid adding too many options that most users are not looking for, more options we add, the slower your site gets πŸ™‚

    You might find this article helpful: https://docs.generatepress.com/article/responsive-display/

    If not can you link me to the site? It’s really hard to answer and provide solution without seeing it.

    Thanks!

    #448805
    Gabriele

    Hi Leo,
    I added the link to the website to my previous post answer.
    Please note that you will need to register an account on the website from the wordpress login page to see the content beside the coming soon page.
    After done that you can check the homepage done with Elementor which represents what I’m trying to achieve: as you resize the browser windows everything scale down as I told before.
    On the contrary, for example the blog page (Articoli) or any other standard page, have the padding also added when the maximum contained width threshold (1248px) is reached, so there is a gap compared to the header and the footer when the browser window go beyond 1248px.
    I need to change this behavior to maintain coherent layout through all the pages of the website.
    Also I need to apply the same logic to the sticky menu to maitain the same behavior as the header content, but I can’t find the right class to target.

    Many Thanks,
    Gabriele

    #449118
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    You can remove the padding when the width is greater than your container width.

    For example:

    @media (min-width: 1248px) {
        .one-container .site-content,
        .page-header-content-container {
            padding-left: 0;
            padding-right: 0;
        }
    }
    #449253
    Gabriele

    Perfect Tom,
    thanks a lot for your help!
    One last thing: how can I target also the sticky nav to make it behaves exactly like the header and site content?

    #449490
    Tom
    Lead Developer
    Lead Developer

    What about it exactly? It all looks like it aligns nicely right now.

    #449577
    Gabriele

    Yes it seems ok over 1248px but anything smaller the sticky menu looses it’s alignment (it looks like 10px padding) until before the mobile header kicks in…
    Please can you double check?

    #449918
    Tom
    Lead Developer
    Lead Developer

    You could try this:

    @media (max-width: 1247px) {
        #sticky-navigation .inside-navigation {
            padding: 0 90px;
        }
    }
    #450115
    Gabriele

    Here we are!
    Many thanks πŸ™‚

    #450315
    Tom
    Lead Developer
    Lead Developer
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.