Archived topic
Overriding Max Width Set by Container
11 replies · Started by Pablo on September 5, 2018
Hi all, me again :)
I'm working on a site currently that follows the container settings to a T throughout the site, except for one section, that needs to be full width of the page. I'm hesitant to set the container to 100% and change all the other properties around because that seems like an odd work-around. I know that the container is set with a max-width property with the margins set to auto, and I tried over-riding that section with a simple css class:
#portfolio {
max-width: 100% !important;
margin-left: 0px !important;
margin-right: 0px !important;
}And the HTML is set as follows:
<div id="portfolio" class="grid-container clearfix">
<div class="grid-100" style="background-color: blue; height: 200px;"></div>
</div>That doesn't seem to work for me, see here. Like I said I'm hesitant to change everything else around it to work for that one section, but currently that seems like the only option. Please let me know how I could go about setting CSS properties for that one section to override the container settings defined in the customizer of GP. Thanks as always!!
Hi there,
have you thought of using GP Sections for that page:
Unfortunately I can't utilize sections because I'm doing a lot of extra work with ACF/PHP inside. So I'm sticking to custom code templates.
You can use try this CSS hack:
.full-width-element {
margin-left: calc(-100vw / 2 + 1200px / 2);
margin-right: calc(-100vw / 2 + 1200px / 2);
}Adjust the 1200px to suit your fixed container width:
Hi David,
That didn't seem to work. It just moved the fixed width of 1200px to the left. I need a container with 100% width of the document/window/page.
See here
Try adding a width: 100%; to that CSS.
Hmm, still didn't seem to do the trick. This is my result right now. My CSS id is as follows:
#portfolio {
width: 100% !important;
margin-left: calc(-100vw / 2 + 1100px / 2) !important;
margin-right: calc(-100vw / 2 + 1100px / 2) !important;
}Can you link me to the site?
It's currently on a local environment on my machine. I can possibly duplicate what I'm trying to do on another site, would that work?
Oops... try: width: 100vw;
You're a legend! So it worked, however the width property wasn't necessary. I was using a 'grid-container' class with the container and that was causing it to follow the properties set by the customizer. I pulled the full container properties I needed outside of that, and it worked like a charm! Thanks so much for your support!
Awesome. Glad we got it working.
