- This topic has 11 replies, 2 voices, and was last updated 5 years, 6 months ago by David.
-
AuthorPosts
-
September 5, 2018 at 8:07 am #669427Pablo
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!!
September 5, 2018 at 8:16 am #669436DavidStaffCustomer SupportHi there,
have you thought of using GP Sections for that page:
September 5, 2018 at 8:19 am #669440PabloUnfortunately 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.
September 5, 2018 at 8:26 am #669457DavidStaffCustomer SupportYou 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:
September 5, 2018 at 8:43 am #669475PabloHi 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
September 5, 2018 at 8:45 am #669479DavidStaffCustomer SupportTry adding a
width: 100%;
to that CSS.September 5, 2018 at 9:01 am #669505PabloHmm, 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; }
September 5, 2018 at 9:02 am #669506DavidStaffCustomer SupportCan you link me to the site?
September 5, 2018 at 9:05 am #669509PabloIt’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?
September 5, 2018 at 9:17 am #669525DavidStaffCustomer SupportOops… try:
width: 100vw;
September 5, 2018 at 9:29 am #669530PabloYou’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!
September 5, 2018 at 9:46 am #669551DavidStaffCustomer SupportAwesome. Glad we got it working.
-
AuthorPosts
- You must be logged in to reply to this topic.