Horizontal scroll

Hi there,

This element is causing the issue:
https://www.screencast.com/t/YcYUJjU4B2iS
Not quite sure how you inserted it but if it's with a plugin then you will need to check with the plugin author.

Hope this helps :)

Hi,

I've desactivated this element but the issue is still there.
Any other idea?

thanks

I believe this is element is causing the trouble now:
https://www.screencast.com/t/cq3JVGBGpcku

If you scroll to the right, you can actually see which element(s) is sticking out.

Ok right that's it, if I disable this element, the scrollbar disappears.
this problem only appears when I set "full width" into this WP gutenberg block: wp-block-media-text

Do you have any idea how can I keep using Full width, but without the scrollbar?

Whenever a block is set to full width, you need to add this CSS to your site:

body {
    overflow-x: hidden;
}

Let me know if that does it or not :)

You're amazing Tom !
thanks you so much

You're welcome :)

Hey Tom,

I just stumbled upon this thread. Had the same problem when using a full width element for the first time.
I investigated a bit and I think this is causing it:

.no-sidebar .entry-content .alignfull {   
    max-width: 100vw;
    width: auto;
}

max-width: 100vw;
If I understand correctly this sets the max-width to the width of the viewport and does not take the width of the scrollbar into account.

Isn't there another way to handle the width? I guess many people run into this problem, when using full width elements.

Thanks

Using alignfull forces the element out of its container and causes this issue. Unfortunately, the only way to solve it is to use this: https://generatepress.com/forums/topic/horizontal-scroll-2/#post-949997

An alternative is to set the page to full width, and then don't use the alignfull classes. We have a plugin coming soon that will make this much easier :)

Better solution (with JavaScript and CSS variable) figured out by Marius.

Thanks for sharing :)