[Resolved] Customize Global Layout

[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

[Leo]

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!

[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

[Tom]

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;
    }
}

[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?

[Tom]

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

[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?

[Tom]

You could try this:

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

[Gabriele]

Here we are!
Many thanks 🙂

[Tom]

You’re welcome 🙂

[Author]

Posts