[Resolved] Contained layout

[Slaven]

Hello,

Can you help me please.

I am trying to reproduce contained layout like https://pepperstone.com
look at this screenshot: https://prntscr.com/on4ijd

But I do not have margin inside contained area, look at screenshot: https://prntscr.com/on4khj

How to reproduce same layout like on pepperstone.com

[Leo]

Hi there,

Can you try this CSS:

body {
    margin-left: 5%;
    margin-right: 5%;
    position: relative;
}

Then you should still be able to set the outer container to full and inner container to contained:
https://docs.generatepress.com/article/header-layout/

Let me know if this helps 🙂

[Slaven]

Hello,

no this is not what I am trying to do.

I already got this with Element seting: https://prntscr.com/on7ap7

But I need do add padding inside contained area like on https://prntscr.com/on4ijd

But I do not want this padding on laptop screen, just on wider desktop screan like https://pepperstone.com

Laptop screen https://prntscr.com/on7dc9
Wider screen: https://prntscr.com/on7de5

[Leo]

In order for the container to show up differently on desktop and laptop, we would need to use media query for the code above:

@media (min-width: 1200px) {
    body {
        margin-left: 5%;
        margin-right: 5%;
        position: relative;
    }
}

You can fine tune the breakpoint 1200px.

[Slaven]

I would like container to be max 1680px, not margin 5%

How to do this?

[Leo]

Let’s try this:

body {
    max-width: 1680px;
    margin: auto;
}

[Slaven]

Great, this is what I am trying to do 🙂

Thank you 🙂

[Slaven]

Just one more thing.

I need to do same thing with sticky header

Sticky header is still full width https://prnt.sc/onhmwm

[Slaven]

I have solution

.sticky-enabled .main-navigation.is_stuck {
    -webkit-box-shadow: 0px 3px 7px -3px #9e9e9e;
    box-shadow: 0px 3px 7px -3px #9e9e9e;
    background-color: #fff;
    max-width: 1680px;
    margin: 0 auto;
}

[Leo]

Glad you’ve figured out 🙂

[Author]

Posts