[Resolved] Horizontal Scrollbar on Pages that use Standard WordPress Gutenberg Cover Block

[Nates]

Hi

I noticed something on my GP sites, whenever I use the Cover Gutenberg block, the page has a horizontal scroll. Please advise if this can be fixed, it is really annoying and looks unprofessional.

Note, I tested this on a basic/clean site as well. I have left a URL in the ‘Your Website’ for your perusal.

[Nates]

Ignore this, just setting to notify me on replies

[David]

Hi there,

the Full Width options in the Core Blocks are terrible – so much so WP look to be rethinking the whole thing.

Instead i would set the page to Full Width page using the Page Builder Container meta box:

https://docs.generatepress.com/article/page-builder-container/

Then you can use the Cover Blocks and Group Blocks to design your page and they will automatically span the full width. Please make sure to remove the Full Width option on the block.

You may also be interested in testing GenerateBlocks:

https://generateblocks.com

Its still in Beta but will make your page building a lot easier in the near future

[Nates]

Thanks very much for the response.

However, my config is set exactly like you explained.

[Nates]

I am very performance orientated, so always weary about installing yet another plugin. Is your GP blocks any different performance wise to what already exists?

[David]

The issue on your front page is the Group Block is set to Full Width – uncheck that in the Blocks toolbar and the issue will go away.

GenerateBlocks is built with the same ethos as GP – which is always performance focused 🙂

[Nates]

Thanks, that works 🙂

[Nates]

Awesome, that is good to know.

[David]

Glad to be of help

[Nates]

After upgrade to WordPress 5.5 this problem as reappeared, please advise how to fix.

[David]

Hi there,

see this topic:

https://generatepress.com/forums/topic/image-cover-does-not-fit-with-container/#post-1407367

[Nates]

Thanks

[David]

You’re welcome

[Andreas]

Hi,

the problem still remains on latest versions (WP 5.9.3, GP 3.1.3, GP Premium 2.1.2).

After hours, I figured out, that the problem only appears, when in Customizer -> Layout -> Off Canvas Panel the off-canvas-panel is set to “off”.

Setting “off-canvas-panel” to “on”, “only desktop” or “only mobile”, the cover block works fine. No scrollbar.

Please, can you fix this?

Thanks
Andy

[David]

Hi there,

The only thing the Off Canvas panel does is to set some overflow CSS – so IT doesn’t cause horizontal scroll. The side effect being it stops all kinds of horizontal scroll.

So we need to ascertain what is in the Cover Block that is causing overflow.

Can you raise a new topic and share a link to your site where we can see the issue ?

[Author]

Posts