Archived topic
In-content Width
5 replies · Started by Laura on October 26, 2022
Hi :)
Want to change the primary in-content area width without it affecting the right sidebar width? Tried creating a layout element but when I adjust the container width in the element, it keeps changing the whole container (including the sidebar).
How can I only adjust the primary content area width, please? Thanks
Hi there,
by default the Theme will use a % for calculating the sidebar and main content width.
Are you wanting a fixed width sidebar ?
If so can you share a page link where you want this applied ?
Hi David
Thanks for the reply, I've added the Url privately for you.
Yes, we wanted a fixed sidebar width and just wanted to change the primary content width only.
Thanks
Laura
Add this CSS:
@media(min-width: 769px) {
:root {
--sidebar-w: 350px;
}
.right-sidebar #right-sidebar {
width: var(--sidebar-w);
}
.right-sidebar .site-content .content-area {
width: calc( 100% - var(--sidebar-w) );
}
}
Change this line: --sidebar-w: 350px; to set the width of your Sidebar.
Now you can change the Container Width in the Customizer > Layout > Container and the main content will shrink or grow to fill the space, without changing the sidebars width.
Thank you, that worked! :)
Glad to hear that!