[Resolved] Overriding Max Width Set by Container

[Pablo]

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!!

GP Premium 1.7.2

[David]

Hi there,

have you thought of using GP Sections for that page:

https://docs.generatepress.com/article/sections-overview/

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

[Pablo]

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.

[David]

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:

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

[Pablo]

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

[David]

Try adding a width: 100%; to that CSS.

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

[Pablo]

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;
}

[David]

Can you link me to the site?

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

[Pablo]

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?

[David]

Oops… try: width: 100vw;

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

[Pablo]

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!

[David]

Awesome. Glad we got it working.

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

[Author]

Posts