[Support request] section like div

[Nikolaj]

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

[David]

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.

[Nikolaj]

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?

[David]

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/

[Nikolaj]

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….

[David]

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.

[Nikolaj]

OK but how does the fullWidth expand? CSS?

It must be possible to copy that to a snippet?

[David]

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

[Author]

Posts