Can't set full width container?

Hacked around it with the following CSS, but I'd like to understand why the full-width container isn't working on my site.

.full-width {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

Hi there,

Make sure the content container is set to full width:
https://docs.generatepress.com/article/content-container/

Let me know if this helps :)

I can't find that option anywhere. Would be helpful if the article said where to find it...

Hi Kev,

You can find the layout meta box here:
https://docs.generatepress.com/article/layout-metabox-overview/#where-is-it

I found it - I was looking on the element page, not the page editor. Thanks.

The element page allows you to set multiple pages to full width at once:
https://docs.generatepress.com/article/content-container/#apply-the-option-to-multiple-pages-or-globally

That doesn’t seem to work - it’s what I had before.

If I create a layout element and set the content area to full width, the the content width to 640px, the full width element ends up contained within the 640px container again.

If I create a layout element and set the content area to full width, the the content width to 640px

Hmm you can't set something full width and also give it a width.

You should only be using one of the 4 options in the layout element panel at one time:
https://docs.generatepress.com/article/layout-element-overview/#content-1

Why have the option at all then? Surely if full width is enabled, the option to set the contained width should be disabled.

The UI reads like the contained width is akin to the inner container width in the settings for a block element.

I think the whole container thing needs some work from a UX perspective - it’s ambiguous and inconsistent at best.

Hi there,

you need to:

1. set the Content Container to Full Width.
2. Then in the page divide it into sections, the simplest way is to use the GenerateBlocks plugin Container Block. That will provide you with a Full Width Container with a Contained Inner Container.

That’s what i ended up doing…kinda.

I set it as you mention, then set the full width site wide layout, except for the home page (where i want this full width divider). That page i pretty much build with generate blocks.

Thanks, David.

Glad to hear that!

Dumb question from me but just want to be sure.

David, the best practice for a lot of these scenarios/pages is just full width the whole page and then make sure everything else inside is in a container?

It really depends on the layout you are trying to create but your statement sounds about right.