Full width container with set sidebar width

[lunatrix]

I would like to set the width of the main container (?) to 98%. I’d like a left sidebar with a max-width of 200px and the content to take up the rest of the container space.

[David]

Hi there,

try this:

1. Set the Page Builder Container to Full Width:
https://docs.generatepress.com/article/page-builder-container/

You can also do this using the Layout Element if you want to apply it to multiple pages:
https://docs.generatepress.com/article/layout-element-overview/

2. Add this CSS:

@media (min-width: 769px) {
    .full-width-content .site-content {
        display: flex;
    }
    
    .full-width-content #primary {
        width: unset;
        float: none;
        flex: 1;
    }
    .full-width-content #right-sidebar {
        width: unset;
        float: none;
        flex: 0 0 200px;
    }    
}

This will only apply when Full Width page builder container is enabled

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[lunatrix]

Close. But not quite. There’s still some whitespace and things aren’t quite aligned properly.

[lunatrix]

Ok, I tweaked the logo, menu, and sidebar, but there’s still too much space between the sidebar and the content.

[David]

For the Left Sidebar you would use this CSS instead:

@media (min-width: 769px) {
    .full-width-content .site-content {
        display: flex;
        flex-direction: row-reverse;
    }
    
    .full-width-content #primary {
        width: unset;
        float: none;
        left: unset;
        flex: 1;
    }
    .full-width-content #left-sidebar {
        width: unset;
        float: none;
        left: unset;
        flex: 0 0 200px;
    }    
}

And then in Customizer > Layout > Header and Layout > Primary Navigation you can set them both and there contents to full width.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[lunatrix]

Perfect! Thanks 🙂

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts