Site logo

Archived topic

In-content Width

5 replies · Started by Laura on October 26, 2022

Viewing posts 1–6 of 6

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!

This archived topic is closed to new replies.