[Resolved] Full width containers, elements, blocks and mobile

[Dennis]

I have used the elements layout to create a full width page. But the mobile uses full width also, so I need some ways of add some padding. And now I can see in the new version that containers are changed. So I don’t know what the correct setting is?

I need full width background sections. But the content to follow page width, like on the front page: https://dust2clean.novahost.dk/

I can’t find any option to make the first container full width?
So I either choose an element template to use full width but with missing padding for mobile OR I remove the full width setting and use container but then I can’t find the solution for full width?

Some guidelines please 🙂

[Ying]

Hi Dennis,

If any section on the page needs to be full width, then the page’s content container needs to be set to full width.
Note: full width content container removes all theme paddings, you need to use the GB Container block to define your paddings.

1. Use the layout meta box in the page editor or a layout element to make the page’s content container full width.

2. Add container block, set your paddings, then add content into it.

[Dennis]

Thanks King for a quick response.
It makes sense with layout for the page.

But when I use this layout the mobile version is also full width? I seems a bit strange that I should set a padding for ALL sections for mobile. Why is this not possible one place?

[Ying]

But when I use this layout the mobile version is also full width?

Yes, correct. Don’t you want the full-width section to be full-width on mobile as well?

If you set paddings for the GB container block on the desktop only, it will inherit the value for mobile, but GB blocks have responsive settings, so you can set specific paddings for mobile too.

[Dennis]

Have you looked at the page on a mobile? There is no space in the side. The text is all to the edge, that is not nice.
I can’t upload an image here…

[Ying]

Have you tried adding paddings to the containers? I don’t see any paddings you’ve set.

[Dennis]

Should I add the paddings in the container? Then I ask again: It seems a bit strange that I should set a padding for ALL sections for mobile. Why is this not possible one place?

So the solution is: Everytime I go with fullwidth page, I should manually add a padding for all sections on the page? In other builders there’s always a default padding for mobile.

[David]

Hi there,

we don’t add padding by default, as we leave it up to the user to apply if they want it.
With GB Pro you can create Local Patterns and Global Styles if you want to automate workflow.

If you need to fix a current page that has many the Containers that are all on the Top Level of the page, you can Shift Click them in the List View to select multiple containers, then switch to Mobile view and add the Padding. With GB all those blocks will receive that style.

[Dennis]

Thanks David. I used that solution but just thought that the process was a little time-consuming. It should be possible to have a standard padding for mobile, because full width on mobile is not very useful 🙂

But I must use the work-around for now.

[David]

For Top Level Blocks i would recommend adding Padding across all screen sizes.
But for now you need to add the padding as you build them.

[Author]

Posts