[Resolved] In-content Width

[Laura]

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

[David]

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 ?

[Laura]

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

[David]

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.

[Laura]

Thank you, that worked! 🙂

[David]

Glad to hear that!

[Author]

Posts