[Resolved] Full width container with set sidebar width

Home Forums Support Full width container with set sidebar width

  • This topic has 6 replies, 2 voices, and was last updated 5 months ago by David.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1247764
    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.

    #1247841
    David
    Staff
    Customer Support

    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

    #1248110
    lunatrix

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

    #1248123
    lunatrix

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

    #1248124
    David
    Staff
    Customer Support

    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.

    #1248134
    lunatrix

    Perfect! Thanks 🙂

    #1248150
    David
    Staff
    Customer Support
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.