Archived topic
Keep the primary content-area centred, and at 60%
5 replies · Started by vikingruler on November 27, 2020
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
Hi there,
Any chance you can link us to the site in question?
You can use the private information field.
Let me know :)
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
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;
}
}Thank you David,
This worked 100%.
Kallad
Awesome - glad to be of help
