Archived topic
Two Third / One Third Layout
7 replies · Started by Paul on December 18, 2021
Hi,
I've asked this question before, but when I've checked the previous answer, I still see the same issue:
https://generatepress.com/forums/topic/two-third-one-third-layout/
I'd like the content area to be the same width as 66% grid column, and the sidebar to be the same width as a 33% grid column.
Using the CSS provided by Leo, you can see on the linked page the widths are different - content area @ 66% is narrower than a grid column, and the sidebar @ 33% is wider than a grid column. How can I correct this?
Thanks,
Paul.
Hi Paul,
Not sure I fully follow your question, are you trying to make the layout like this?
https://www.screencast.com/t/TdW7tw4Ge
If so, go to customizer > layout > container, set content padding to 0.
Then add this CSS to remove the margin on content:
.one-container.right-sidebar .site-main {
margin-right: 0;
}Hi Ying,
I'd like the content area to be exactly the same width as the 66% grid column below it. And the sidebar to be exactly the same width as the 33% grid column below that.
I'm not clear why the CSS provided by Leo doesn't result in the correct widths since the percentage values are the same, so the 20px gap.
I can't set the content padding to zero in this instance.
Check the screenshot below, the sidebar widget area is 1/3 and the content area is 2/3.
The CSS is working just fine:
https://www.screencast.com/t/CdF97XuhGxw
The 3 red boxes are exact same size.
In the screenshot the sidebar is 373px, same as I see. 1/3 grid column below is 360px.
2/3 grid column is 739px, content area is 726px.
Check this out:https://www.screencast.com/t/M8nFEauL
Increasing/decreasing the percentage values in CSS seems to resolve this.
Thanks for your help.
No problem :)
