[Resolved] Container width full screen

[Kevin]

I’m unable to change the width of a contaiuner to full width.

[Kevin]

http://kevinm204.sg-host.com/white-fillings/

see test width

[David]

Hi there,

If you want to have full width sections on a page, then i suggest you set the pages Content Container to Full Width:

https://docs.generatepress.com/article/content-container/

This will give you a 100% wide page with no padding.
Then use the GenerateBlocks Container Block to divide your pages into Sections, which you can now set to Contained, Full width etc.

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

[Kevin]

I’m not sure how your answer relates, is that not an old setting in the Content Container?

I’ve managed to get the layout I want here: http://kevinm204.sg-host.com/book-appointment/

It only seems to be an issue with the Block – Content Template – Element?

I’m using this to create the layout for my posts http://kevinm204.sg-host.com/white-fillings/

Any further help would be great.

[Ying]

I’m not sure how your answer relates, is that not an old setting in the Content Container?

You are currently applying alignfull option to the GB containers which will cause horizontal scroll on your site.

So instead of applying alignfull to each container, you can set the entire page to full width.

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

[Kevin]

I’m sorry, I think I might not be explaining myself clearly

I have achieved the layout I want here: http://kevinm204.sg-host.com/book-appointment/

When I try to create the same layout as a Block Element set to Content Template displaying my posts the grey box heading isn’t the full width of the screen

http://kevinm204.sg-host.com/white-fillings/

[Ying]

Can you give it a try?

If you don’t want to use the layout meta box for each individual post, you can also use a layout element to apply to all posts.

Go to appearance > elements, create a new layout element, set the content container to full width, and choose posts > all posts as location.
https://docs.generatepress.com/article/layout-element-overview/#content-1

Or add this CSS:

.no-sidebar .entry-content .alignfull {
    margin-left: calc(-100vw / 2 + 100% / 2);
    margin-right: calc(-100vw / 2 + 100% / 2);
    max-width: 100vw;
    width: auto;
}

[Kevin]

I am using the layout element to apply the design to all posts.

Does the same block not work in an element?

I’d rather not add additional css.

If it doesn’t work I can always add the full screen content to the hero element I’m using.

It would be good if it works as it does on a regular page/post not sure why it wouldn’t

[Kevin]

I’ve created a test post and added the same block and it displays fine: http://kevinm204.sg-host.com/test-post/

The problem appears to only occur when I am making a new layout element. I can’t see an option to set the content container to full width,

[Ying]

That’s weird, so there’s no content tab in the layout element on your end?
https://docs.generatepress.com/article/layout-element-overview/#content-1

[Kevin]

I created a Block – Content Template

http://kevinm204.sg-host.com/wp-content/uploads/2022/08/Screenshot-2022-08-16-at-19.14.57.png

I’ve looked at the Layout element, which has the tabs you described but that doesn’t seem to allow me to design a layout and dynamically pull content.

[Ying]

I’ve looked at the Layout element, which has the tabs you described but that doesn’t seem to allow me to design a layout and dynamically pull content.

Can you give it a try?

The content template should still be activated, they should work together to achieve what you are looking for.

[Kevin]

Oh… that’s brilliant!!!

http://kevinm204.sg-host.com/white-fillings/

It’s like the merge header in the Header Element works with the Block – Page Hero

I really appreciate you hanging with me. This is my first proper build using Generatepress / Blocks and I’m loving what’s possible. I just need help working a few things out 🙂

Thanks again Ying x

[Ying]

You are welcome 🙂
Glad to help!

[Author]

Posts