[Resolved] Horizontal scroll

[Sebastien]

Hi,
I have a problem into my page: when I use Desktop device, I get a horizontal scrollbar.
Can you help me to hide the scroll bar pleasE?

thanks

[Leo]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sebastien]

Hi,

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

thanks

[Leo]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sebastien]

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?

[Tom]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Sebastien]

You’re amazing Tom !
thanks you so much

[Tom]

You’re welcome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Marc]

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

[Tom]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Rafał]

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

[Leo]

Thanks for sharing 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts