[Resolved] Overriding Max Width Set by Container

Home Forums Support [Resolved] Overriding Max Width Set by Container

Home Forums Support Overriding Max Width Set by Container

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #669427
    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!!

    #669436
    David
    Staff
    Customer Support

    Hi there,

    have you thought of using GP Sections for that page:

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

    #669440
    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.

    #669457
    David
    Staff
    Customer Support

    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:

    #669475
    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

    #669479
    David
    Staff
    Customer Support

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

    #669505
    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;
    }
    #669506
    David
    Staff
    Customer Support

    Can you link me to the site?

    #669509
    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?

    #669525
    David
    Staff
    Customer Support

    Oops… try: width: 100vw;

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

    #669551
    David
    Staff
    Customer Support

    Awesome. Glad we got it working.

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.