[Resolved] full width site

[Josh]

Is there any way to set the whole site to full width? I can see in individual page settings, but not for the whole site. I did see an article about doing with layout elements, but it seems like there should just be a button or function i can add.

Additionally, I was trying to make a colored gutenberg group but the option to make it full width didn’t show up. I added: add_theme_support( ‘align-wide’ ); to my themes function but this does nothing for the front end. Am I missing something?

[Ying]

Hi Josh,

You can use a layout element to achieve this by setting the location to entire site.
https://docs.generatepress.com/article/layout-element-overview/#content-1

Let me know if you need further assistance 🙂

[Josh]

Thanks for the quick reply. My question was what alternative is there to using the elements.

I was also asking why there were no alignment options for gutenberg blocks either.. unless i add theme support.

On individual page settings there are three options “default” “full” and “contained”.

Where do I set the “default”?

[Leo]

A layout element is the best solution – not sure why that doesn’t work you?

You can try this CSS without a layout element;

.site.grid-container {
    max-width: 100%;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

The default is the setting from the customizer:
https://docs.generatepress.com/article/container-width/
https://docs.generatepress.com/article/content-padding/

[Josh]

Hey Leo. It’s not that it doesn’t work. I’m just trying to figure it out. Not sure why I basically have to enter a new CPT (elements) entry to set a default. And why does the page edit section have an option to set to default if there is no default?

I would rather have a very clean site that my clients can’t go in and change (or have the option to go in and change). With the elements they will see layouts. If I were able to do it in my functions.php there would be no question on their part.

[Leo]

And why does the page edit section have an option to set to default if there is no default?

As mentioned above, default just means that the container will inherit the container width and content padding settings you’ve set in the customizer.

Perhaps the CSS solution I provided would be the best in this case.

You just have to remove the content padding set in the customizer or I can add it on to the CSS as well.

Let me know 🙂

[Josh]

Thank you LEO,

As mentioned above, default just means that the container will inherit the container width and content padding settings you’ve set in the customizer.

To be clear though, there is no “full-width” setting in the customizer, right? It’s not that I am just blind and missed it? 🙂 If there isn’t one there, is there a reason? It seems like a many people would want to be able to make their site full width and it makes sense to find that setting in the customizer.

[Leo]

No – there isn’t a full-width site in the customizer.

I’ve actually never seen a website site where all pages and posts are full widths – generally, there are (some) static pages that are full width but not single posts.

Imagine what a full-width single post full of text would look like if someone has a really wide screen or viewing on a TV.

The customizer options are global options that apply to the entire site so the option wouldn’t really work there.

This is the exact reason why we created a layout element option for it so it has the flexibility of using the display rules.

[Josh]

Perhaps I have the lingo wrong. I still want the content to be in a container. I just want there to be rows on the pages. a white row (with contained text), then a colored row (with contained text but color goes all the way to the edge) and then a 2nd white row followed lastly by a 2nd colored row. I want this to be on each page. Is there a way to set a anything up so that when I choose a group in gutenberg and add a background color to it make it so the color spans the whole page?

[Josh]

https://imgur.com/a/QDqbfmS

I’ve added some images. The top one shows what I’m trying to do (just extend the color bar).
2nd image shows what happens if I change the layout setting from default to fullwidth.

When I try changing the page layout setting to fullwidth ALL content goes full width. If I don’t change the page layout setting then the colored bar stays in the site container.

[David]

Hi there,

If you want a contained content page that has some elements spanning the full width of the viewport then there are two methods:

1. Default container – forced full width blocks:
a. Leave the content container width as default, so it uses the Customizer > Layout > Contain Width.
b. Select a Group Block / Container Block or other block that has Full Width alignment support. And select the Full Width option in the Block tool bar.

2. Set the Content Container to Full Width and use GenerateBlocks Container Blocks to construct the page in sections.
a. You can use a Layout Element to set Pages to be full width or you can simply apply it individually in the Post Editor:
https://docs.generatepress.com/article/content-container/
b. Build you page using Container Blocks to create ‘Sections’.
c. You can change the background colors and adjust the container width of each section to suit your needs.

Of the two options #2 is my preferred method. The first option is the WP way of doing things that uses CSS hacks to force elements to full width, which can lead to overflow issues.

[Josh]

Thank you David!

[David]

You’re welcome

[Author]

Posts