Archived topic
Extend page section width to browser width and beyond site container paddings
4 replies · Started by George on September 19, 2018
I have a section that is 100% wide but still inherits the container global padding from the Customizer. Is there a way to bypass that and just have the section expand to the browser's full width but keep my custom container width of 1300px?
Ok, it seems that settings zero left and right paddings to the custom section class didn't cut it but there is the generate-sections-inside-container class that I managed to reset and get the full width. I would maybe suggest for the next GP Premium version to have a Left and Right Padding settings in addition to the Top and Bottom Padding ones for the Sections.
Aside of using GP Sections to build out the page, there are several CSS methods, the simplest of which is this:
.full-width-section {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}It will only work correctly if the parent container is centered. So no sidebars or things go pear shaped.
Hmm yeah, thanks, David. Too many things need to be in control with this solution, it seems. I tried it with parent container centered and no sidebars and things did went pear-shaped! Sections worked much better in my example.
Yes it does take some tinkering. GP Sections is the best way to go in your instance.
