Archived topic
Centered Content while using sidebar
5 replies · Started by Maarten on March 29, 2019
I'm trying to have a centered primary content area all over my website, but add a right sidebar on certain pages while keeping the central content area the same (same width and centered).
I've tried almost everything (also in the beta 1.8), but can't figure out how.
Closest I got is specifying a global width in the customizer that uses a width that's suitable for sidebar/content/sidebar and then removing the sidebars and changing the width in a layout element where they aren't needed (beta 1.8 function). However, this means I can't use the sections function anymore to have a section background stretch the full screen.
Any suggestions?
Hi there,
can you link me to a page where the sidebar is active?
Hi David,
It isn't, as I can't get it to work. Not that I can't activate the sidebars (see the test page below), I just can't get the primary content to stay centered.
My container width now is 700px. If I activate a sidebar, this stays 700 of course (making the primary area smaller to add the sidebar, see test page). In the beta 1.8 I can specify a container width per layout element, but as this is a max-width it doesn't widen it, but can only make the container smaller.
Hmmm... try this:
@media (min-width: 1024px) {
.right-sidebar .site-content {
display: flex;
}
.right-sidebar .content-area {
flex: 1 0 700px;
}
.right-sidebar .site.grid-container {
max-width: 1300px;
}
.right-sidebar .site-content:before {
content:'' !important;
display: block;
flex: 0 0 300px;
}
.right-sidebar #right-sidebar {
flex: 0 0 300px;
}
}My hero! :-)
Didn't think of using the .right-sidebar class and flex myself, so thanks! I'll probably add some for the tablet media query as well, but should be able to figure that out myself.
Thanks for the fast responses!
Its a bit overkill and i am sure it could be done with some left margin on the content area, but i think this is a little more flexible :)
