Horizontal Scrollbar with Gutenberg Cover Block

Hi there,

there isn't much that can done when using the Full Width block option.
It uses CSS to hack the sites padding, and stretch the block across the viewport.
The problem is that some browsers on windows adds the vertical scrollbar inside the viewport which cannot be accounted for with CSS and this leads to horizontal overflow.

If you want full width content then we recommend you:

1. set the Content container to Full Width:

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

2. Build the page out using the GenerateBlocks Container Block, to create sections that can be either Full Width or contained.

This method means no overflow as you won't need the Blocks Full Width option and you get to control the widths and padding as you need for your design.

Hi David,

thanks for the quick answer, but this seems to be an issue of generatepress.
It works perfect with standard themes.

I tried also with generateblocks (without Content container set to Full Width).
With Full Width container, you get the same results (see my private note).

Setting the Content container to Full Width and working with containers for each section would only be workaround. That means much work, if you have many pages and much content...

Finally: The problem shows up on Mac and Win: FF, Chrome, Safari, Edge ...

I tried also with generateblocks (without Content container set to Full Width).
With Full Width container, you get the same results (see my private note).

With GB, you don't need to use the align full option, so make sure that option is disabled.
The outer container of GB is full width by default, while you can choose full width or contained width for the inner container.

That means much work, if you have many pages and much content…

Not really. You can use a layout element to set all pages (or some pages) content container to full width.
https://docs.generatepress.com/article/layout-element-overview/

Perhaps, I've to make it more clear...

I don't want to set the page content container to full width, cause most content has contained width. So, I put the setting here to default.

Now, to get some content to full width, I have to set the element I use (GB container or cover block) to full width. Right?

Doing this in combination with off-canvas-panel to “off” brings up a scrollbar.

Why is this working with off-canvas-panel “on”?

Because when activate off canvas menu, this CSS will be added to your site which hides (not fixes) the horizontal scroll on front end.

.offside-js--init {
    overflow-x: hidden;
}

The correct and best way to do this in GP is what David suggested.

The full width option works in WP theme but not GP is because GP's template structure is different from WP's template structure. For example, in WP twenty twenty one theme, you can't change the content container width unless you use a plugin.

Why not adding this style to non off-canvas-menu pages?
Any impacts?

For example, some users want to use CSS to make the site header sticky, if theoverflow:hidden; is added to ancestor elements of the header, it will stop the sticky from working.

There're other scenarios too. We try to keep the theme light, so we don't add unnecessary code to the theme unless we have to.

For example, some users want to use CSS to make the site header sticky, if theoverflow:hidden; is added to a parent element of the header, it will stop the sticky from working.

So these scenarios won't work with off-canvas-menu pages?

It will if not both htmland bodyhave the overflowproperty.

We are here to provide the solution that we think it's the best, but after all it's your choice.