[Resolved] Horizontal scroll

Home Forums Support [Resolved] Horizontal scroll

Home Forums Support Horizontal scroll

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #949363
    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

    #949379
    Leo
    Staff
    Customer Support

    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 πŸ™‚

    #949680
    Sebastien

    Hi,

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

    thanks

    #949916
    Leo
    Staff
    Customer Support

    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.

    #949945
    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?

    #949997
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #950035
    Sebastien

    You’re amazing Tom !
    thanks you so much

    #950176
    Tom
    Lead Developer
    Lead Developer

    You’re welcome πŸ™‚

    #995599
    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

    #995995
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #1240450
    RafaΕ‚

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

    #1240736
    Leo
    Staff
    Customer Support

    Thanks for sharing πŸ™‚

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.