[Resolved] Full width container with background image creates a scrollbar

[Digital Creators]

hi there

I’m using generate press for some time now and I’m very happy with it, works pretty great.

However, I ran into a problem with the new editor. If I use a background image and set the container to “full width” (alignment option top left), it creates an ugly scroll bar at the bottom, i.e. the image is scrollable in x-direction.
In the old editor version, I set the container to “full width”, and the inner container to “contained width” (in the right sidebar > layout). This option is replaced by the flex thingy. so I tried using the alignment option (top left, when container is active). If I set the outer container (with the background image) to “full width” using the alignment option, the scrollbar appears.

any help?

[David]

Hi there,

on PC browsers, the scrollbar appears on scroll and occupies some of the viewport. Which causes horizontal scroll if you use the Full Width options in the toolbar.

Instead:

1. don’t use the Full Width option.
2. make the entire page full width using the Content Container meta box:

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

3. Divide up your page with GB Container blocks for the various sections, and make sure to add some padding to the Contaier Blocks.

[Digital Creators]

Thx for the quick reply.

Is this a quick fix or is it the standard way to go? I’d prefer not to set a padding for each container separately, tbh:)

FYI: The issue doesn’t seem to appear when I use an “element” as the hero part, so that would work too (not for me in this case for different reasons)

Cheers
Dave

[David]

That is the recommended way to go if you require Full Width content within the page.
Elements such as the Page Hero are hooked outside the site container so are by default Full Width.

Whether it be a full width page or a hero element the GB Container Block will require some padding.
GB Pro users can use Local Patterns and Global Styles to simplify their workflow to auto add sections with padding etc.
Free users, the simplest approach is to create the base sections with padding and base styling on GB Container and just duplicate them as needed.

Otherwise you at risk that the browser scrollbar will interfere with the layout.

[Author]

Posts