Search for: Log In Free Support [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 11 months, 4 weeks ago by David. Viewing 7 posts - 1 through 7 (of 7 total) Author Posts April 21, 2020 at 5:46 am #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. April 21, 2020 at 7:09 am #1247841 DavidStaff 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 Documentation: http://docs.generatepress.com/ Adding CSS: http://docs.generatepress.com/article/adding-css/ April 21, 2020 at 8:00 am #1248110 lunatrix Close. But not quite. There’s still some whitespace and things aren’t quite aligned properly. April 21, 2020 at 8:07 am #1248123 lunatrix Ok, I tweaked the logo, menu, and sidebar, but there’s still too much space between the sidebar and the content. April 21, 2020 at 8:07 am #1248124 DavidStaff 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. Documentation: http://docs.generatepress.com/ Adding CSS: http://docs.generatepress.com/article/adding-css/ April 21, 2020 at 8:17 am #1248134 lunatrix Perfect! Thanks 🙂 April 21, 2020 at 8:25 am #1248150 DavidStaff Customer Support You’re welcome Documentation: http://docs.generatepress.com/ Adding CSS: http://docs.generatepress.com/article/adding-css/ Author Posts Viewing 7 posts - 1 through 7 (of 7 total) You must be logged in to reply to this topic. Log In Username: Password: Keep me signed in Log In