[Resolved] Horizontal scoll bar with full width blocks

[Daniele]

Hello,
I have an horizontal scroll bar when adding any full width block.

It happens to me a lot of times with generatepress.
I didn’t edit CSS regarding full width option

[Ying]

Hi Daniele,

Yes, due to GP’s page structure and the CSS that WP used to make full width, there will be a horizontal scroll bar.

The best way to make the content container to full width first. You can do so using one of the method below:

1. Using the layout metabox in the page editor:https://docs.generatepress.com/article/layout-metabox-overview/#where-is-it

2. Using a layout element: https://docs.generatepress.com/article/layout-element-overview/#content-1

I would also recommend using GenreateBlocks plugin, its Containerblock can give you much better control in all aspects compare to the WP blocks.

[Daniele]

Hi Ying,
Thanks for your answer.

Unfortunately I already finished all the pages and used the default container…
Is there any css patch that could fix it for the moment?

Thanks

[Fernando]

Hi Daniele,

Option 2 in Ying’s suggestion would be a good approach to achieve this without using CSS.

You would simply need to create Layout Element then set it to display on all pages or on any page where the issue is evident. In essence, you only need to create one Element as opposed to modifying each page. Scalability-wise, this may be more preferable because it’s easier to modify if needed in the future.

If you would like to go with the CSS route, can you try adding the full-width Block once more, and weI’ll appropriate CSS we provide to fix the issue. Currently, I can’t seem to replicate the issue from my end on your website.

Kindly let us know.

[Daniele]

Hi guys,
for the moment I’ll rather go with the CSS approach, maybe the next website I could consider it

This is a page where the issue is present: https://dev2.oceandigitals.com/features/

thank you!

[Fernando]

I can’t seem to replicate the scrollbar issue on my end.

Here’s a screen recording of what I see on different views: https://share.getcloudapp.com/Z4uAwvoR

Are you still seeing the scrollbar?

Can you try clearing any caching mechanism set in your website if we’re seeing something different?

Kindly let us know.

[Daniele]

Hi Fernando, here is what I see: https://we.tl/t-JONwTeyMTr
I don’t have any chache on the website.
I think it depends on the resolution. Mine is 3840X2160

[David]

Hi there,

Chromium browsers on Windows includes the vertical scrollbar inside the viewport. Which messes up the hacky fullwidth CSS that option uses.

You can try adding this CSS to stop the overflow:

body, html {
    overflow-x: hidden;
}

[Daniele]

Thanks David,
it worked

[David]

You’re welcome

[Author]

Posts