[Resolved] Keep the primary content-area centred, and at 60%

[andrachans]

Hello there

I would like to make use of the following sidebar positions on different pages / posts, etc. on my site:

– Right Sidebar
– Left Sidebar
– No Sidebars
– Both Sidebars

If I set the container width to 1440px and both the left sidebar width and right sidebar width to 20% each, how do I keep the primary content-area centred, and at 60%, as it is when I use both sidebars.

My objective is to have the primary content-area remain the same width, and in the same position, whether there are both sidebars, no sidebars, etc., as this makes for a more pleasant user experience.

I am using a child theme, and would prefer to work on a solution outside of ‘Elements’, if at all possible.

Thank you.

Kallad

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know 🙂

[andrachans]

Thank you Leo,

I have given the link below.

To explain further:

– Container width to be 1440px

– Primary content-area to be 60%, with left sidebar, or, with right sidebar, or with no sidebars. Currently it only remains at 60% when I use both sidebars.

– Primary content-area to be centered, with left sidebar, or, right sidebar, or no sidebars. Currently it only remains centered when I use both sidebars.

– Full page layout width of website, would then be the same width as when I use both sidebars – centred, and at 60% – and not the full container width of 1440px.

Thank you.

Kallad

[David]

Hi there,

try adding this CSS:

@media(min-width: 769px) {
    body:not(.both-sidebars) #page .site-content .content-area {
        max-width: calc(60% - 20px);
        margin-left: auto;
        margin-right: auto;
    }

    body.right-sidebar #page .site-content .content-area {
        margin-right: unset;
    }

    body.left-sidebar #page .site-content .content-area {
        margin-left: unset;
    }
}

[andrachans]

Thank you David,

This worked 100%.

Kallad

[David]

Awesome – glad to be of help

[Author]

Posts