[Resolved] Two Third / One Third Layout

[Paul]

Hi,

Using the content/sidebar layout how can I recreate the same two third / one third widths I can create with a grid?

To maintain the correct line length I have a container of 1020px, 20px padding left/right, 20px padding left/right for sidebar widgets. I’ve also set the sidebar width to 33% in css. This gives a content width of 638px, 20px margin, and a sidebar width of 323px.

If I create the same layout with a grid 66% / 33%, I have a content width of 646px, 20px vertical padding, and a second column width of 313px.

How can I amend my css so the content and sidebar widths of the default template are identical to those output using a grid?

I’ve added examples in the private info.

Thanks,
Paul.

[Leo]

Hi Paul,

Sorry I’m not quite getting the question here.

On the page with a sidebar, I see that you are using the CSS here to set the sidebar width:

.site-content .is-right-sidebar {
    width: 33%;
}

And currently, the content area is using 70% set in the customizer which makes it over 100%.

Would this CSS be better?

@media (min-width: 769px) {
    .right-sidebar .site-content .content-area {
        width: 66.66%;
    }
    .right-sidebar .site-content .is-right-sidebar {
        width: 33.33%;
    }
}

[Paul]

Hi Leo,

Your CSS works – I had tried something similar but obviously not right. I also had to remove the vertical padding in my grid and add 20px right margin to the 66% container. The widths of the content template and the GP default now match.

Thanks for your help,
Paul

[Leo]

No problem 🙂

[Author]

Posts