Archived topic
section like div
7 replies · Started by Nikolaj on April 22, 2019
dear Tom,
using sections doesn't fit our current job; However if we need to replica the function of a fullwidth container (browser width) how can that be done; The below kind of works but not quite?
.full-width {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
margin-top: 0px;
margin-bottom: 0px;
}Hi there,
would it be simpler you set the Page Builder Container to full width?
https://docs.generatepress.com/article/page-builder-container/
Then you could do something like this:
<div class="custom-section-classes">
<div class="grid-container">
<!-- HTML Here -->
</div>
</div>The grid-container class gets the container width set in the customizer and adds auto margins to keep it aligned.
thanks but by doing so all content will be set to full width; What I need is a way to insert a block that acts like a section going from side to side in the browser.
Any suggestions?
How many pages do you intend to use that on? If its only a few then you can wrap the standard width content in just a grid-container wrap.
If not then the current solution you're using would be one of the preferred CSS hacks. Other methods are listed here:
https://css-tricks.com/full-width-containers-limited-width-parents/
but how is the fullwidth section created when using sections? I'm looking for a code snippet to add here and there which does what the 'section fullwidth' does....
Sections uses the same principle as the Full Width Page Builder container. It sets the Container to 100% width. So Full Width Sections will expand the full width. Whereas a Contained Section is given the grid-container class.
OK but how does the fullWidth expand? CSS?
It must be possible to copy that to a snippet?
When you activate Sections the parent container #page is set to 100% wide. The inner containers within that, such as the #primary.content-area are also forced to 100% and all padding is removed.
So a Full Width Section is 100% wide by default.
Its the same method as is i suggested with the Page Builder Container
