- This topic has 7 replies, 2 voices, and was last updated 7 years, 6 months ago by
.
-
Posts
-
Hi there,
How do I create full-width page sections like this page. I am talking about the alternate background colors for each chapter he has. He is using Generatepress so I am sure we can do it.
I tried adding this code (see example here)
.altsection{ background-color: #F8F8F8; color: #535a5f;border: 1px solid #dbd9d9;padding-top: 25px; padding-right: 10px; padding-left: 10px; padding-bottom: 10px;margin-bottom: 20px;}but it still left some distance off both sides of the container which gave it a box look and not a page section look.Please suggest me a way I can do the above like that blog I linked (and it should be responsive). I didn’t want to use the page section feature of GP since that would lock me with the theme (correct me if I am wrong 🙂 ) (I want to use this GP theme forever but I have a bad experience of theme lock-in with Thrive themes which is still present in my blog at places).
Best regards,
-SwadhinCustomer Support
Hi there,
GP Sections won’t lock you in. If disabled the content gets placed in the WP editor without any of the Section markup.
Alternatively you can try this CSS on your full width sections:
.full-width-section { width: 100vw; margin-left: calc(-100vw / 2 + 1100px / 2) !important; /* adjust 1100px to match Container width */ margin-right: calc(-100vw / 2 + 1100px / 2) !important; /* adjust 1100px to match Container width */ }Hi David,
Thanks for replying.
Agreed with you on theme lock-in for GP. But when I change theme and content gets placed in the WP editor without any of the Section markup then the page layout (purpose of using GP sections) will also get ruined.
Then I have again to search 100s of pages and see where I had used GP sections and then go add custom codes (or use the new theme’s features, in any) to get back the look and layout.Anyways,
The code you gave me wasn’t responsive. It broke the whole layout even on desktop view. Here is a screenshot of it: https://imgur.com/p9fUPW8
If you see the right edge you can see text gets cut (I can actually scroll horizontally to see those texts, though).
P.S. I also use this code on the same page (though I don’t think this is the cause of new code not working).
#page { max-width: 800px; }Is it possible to share me a link of that page with the wide section and CSS in place.
HI David,
I have linked the page in the website URL section. 🙂try this:
.full-width-section { margin-left: calc(-100vw / 2 + 740px / 2) !important; margin-right: calc(-100vw / 2 + 740px / 2) !important; /* 740px = the width of the content excluding the padding */ box-sizing: border-box; }Hi David,
It didn’t work. The same thing happened like content overflowing the edges of screen while the parts of the article I didn’t use the codes were in their usual 800px wide container.
David,
I don’t know much but can we have a box that just fits the whole container width without having padding width? I use this code for box like I already said:
.altsection{ background-color: #F8F8F8; color: #535a5f; border: 1px solid #dbd9d9; padding-top: 25px; padding-right: 10px; padding-left: 10px; padding-bottom: 10px; margin-bottom: 20px;}Is there something we can achieve with tinkering this code?
Or
What do you suggest? why isn’t the code working, is there something with my template set up? Like I have made the width of it to 800px?
Thanks
-SwadhinSo i added this into the site and it works for me, so not sure where its going wrong
.altsection { background-color: #F8F8F8; color: #535a5f; border: 1px solid #dbd9d9; padding-top: 25px; padding-right: 10px; padding-left: 10px; padding-bottom: 10px; margin-bottom: 20px; margin-left: calc(-100vw / 2 + 740px / 2) !important; margin-right: calc(-100vw / 2 + 740px / 2) !important; box-sizing: border-box; }Theres only a few workarounds for this, aside of Sections or Pagebuilders. This is one method, the other is the whole page is full width and we apply margins to everything apart from that section. The other would require some Javascript. Of the three this by far the simplest method,
- You must be logged in to reply to this topic.
