Archived topic

Two Third / One Third Layout

3 replies · Started by Paul on August 25, 2021

Viewing posts 1–4 of 4

August 25, 2021 at 2:19 am #1907687

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.

August 25, 2021 at 9:26 am #1908271

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

August 25, 2021 at 12:25 pm #1908408

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

August 25, 2021 at 12:42 pm #1908419

No problem :)

This archived topic is closed to new replies.

Start building better websites today.