[Resolved] container to fullwidth or 2200px or whatever

[tita]

As no longer container works with full-width or contained (flex-box) there is no way to get a 100% (or 2200px) width for containers.
For starting in the customizer we have to make the container max 1100px and padding (cause of the blog post entries which customers should make).
So – no documentation in generatepress or generateblocks how to achieve this.
So, please advise how to get ab background image or color to 100% width.
Also it looks like, changing the settings for blocks in the backend does not really make a different in the frontend.
And another really funny thing – Somehow it worked on the first block, but copy block and paste it below, doesnt work at all.

[Fernando]

Hi Tita,

To clarify, are you wanting a full width layout for all pages except for the Blog page?

[tita]

I want 1100px for content on pages with the opportunity for a 100% BG with color or image (hero-sections).
And i want 1100px with padding for the blog posts.
Thank you.

[David]

Hi there,

1. Your standard width

in the Customizer set the Container Width to the size you want for your posts eg. 1100px.

2. Make a Full Width Page

Then on a page where you want to have Full Width Content, in the Editor set the Content Container to Full Width.

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

This will make the page 100% wide and remove the themes spacing ( padding and margins ) giving you a blank canvas to work with. Then use the GenerateBlocks Container Block to create the sections of that page, make sure to add some padding to those containers.

3. A standard width post with a Full Width Hero

You can use GP Block Elements to create Page Heros that are full width:

https://docs.generatepress.com/article/block-element-page-hero/

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

[tita]

This was before the flex-box, inner-container setup. This is not working anymore, cause those buttons still not available anymore.
https://docs.generateblocks.com/article/container-overview/
So please advise how to setup a banner with 100% full-width background color or image (maybe better word than page-hero). And not on all pages, blogs, archieves,… just on one page.
Elements dont work, cause banner is somewhere between the content.

[David]

When you add a Container Block to the top level of the page, there is an Insert Inner Container Button in the toolbar. See here:

https://docs.generateblocks.com/article/add-inner-container/

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

[tita]

Please advise, how to make a full-width banner (at least the background image or color should be fullwidth, not the content) – somewhere on the page (not on top, not with elements, not a hook, not with custom template), somewhere inbetween all the other content.
thank you

[Ying]

Hi Tita,

To make full-width sections in the content area, you will need to set the content container to full width first.

You can use the layout metabox or a layout element for bulk operation.

[tita]

Hi Ying,
no this doesnt work. I made a layout element with
content area: fullwidth
content width: 1100px
no effect – background still 1100px.
Than i went to the customizer and set container width from 1100px to 2400px – also no. content background is still 1100px width.
So, I can see you can not help.
Is there a way to get rid of legacy layout? How do i get back to the old version?

[Fernando]

Hi Tita,

The suggestion by Ying should work. Can you provide admin login credentials so we can take a look at why it isn’t working? Please use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

[tita]

Here we go.
thank you in advance.

[Fernando]

Can you try setting the Page to Full width first? It currently isn’t. See: https://share.getcloudapp.com/mXuDAbQO

[tita]

layout element is/was assigned to all pages. Now layout element is on draft.

[Fernando]

If you’re using a Layout Element, remove the 1100px Content Width you set.

[tita]

perfect – so, the solution is:
Customizer – set container to what you like including padding.
Page – Go to page > layout(if you cant see it, activate in preferences) > Content-Container > full-width
then all section(container) are full width, just adjust the inner container to your prefered size and center it with padding auto/auto.
Thank you.

[Author]

Posts