[Resolved] Horizontal scrolling issues

Home Forums Support [Resolved] Horizontal scrolling issues

Home Forums Support Horizontal scrolling issues

  • This topic has 7 replies, 4 voices, and was last updated 1 month ago by David.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #2151479
    Larry

    I noticed that I’m having some horizontal scrolling issues when I use full width images on some of my sites. I read through some of the other posts about horizontal scrolling and tried some of the suggestions, and they didn’t work πŸ™

    I’m using GP Premium and GB Pro

    Thanks

    https://taste.larryboulder.com

    #2151485
    Ying
    Staff
    Customer Support

    Hi Larry,

    Your site is not available currently, can you check?

    I noticed that I’m having some horizontal scrolling issues when I use full width images on some of my sites

    Are you using the align full option from the image block? If so, yes, it will cause horizontal scroll.

    But I’d have to see your site to make sure πŸ™‚

    Let me know!

    #2152414
    Larry

    I’ll contact Siteground and see whats going on, I can see it on my end.

    I am using the align full option, is there a workaround to avoid the horizontal scrolling?

    Thanks

    Larry

    #2152444
    Ying
    Staff
    Customer Support

    I can see your site now.

    Solution:
    1. Do NOT using alignfulloption for any of the blocks.

    2. Set the page content container to full width using the layout metabox in the page editor:
    https://docs.generatepress.com/article/layout-metabox-overview/#where-is-it

    #2152478
    Larry

    Wonderful!

    That totally did the trick πŸ™‚

    Many Thanks!

    #2152555
    Ying
    Staff
    Customer Support

    You are welcome πŸ™‚

    #2275866
    Ben

    I’m getting same issues when using alignfull.

    I understand what you mean about setting pages to be full width, but thats not practical on some sites and will undo a lot of formatting.
    My work around is to put

    overflow-x: hidden;

    on html selector.

    Is there any other way we can fix this without having to change all pages to full width and then have to correct any formatting issues that arise on each page?
    Maybe adjusting .alignfull that appears in/wp-content/themes/generatepress/assets/css/main.min.css

    .no-sidebar .entry-content .alignfull {
    margin-left: calc(-100vw / 2 + 100% / 2);
    margin-right: calc(-100vw / 2 + 100% / 2);
    max-width: 100vw;
    width: auto;
    }

    #2276248
    David
    Staff
    Customer Support

    Hi there,

    apart from creating the Full Width Content Container, all other methods that ‘force’ an element to be full width are prone to this kind of issue.

    The issue arises because certain browsers on Windows devices display the Scrollbar inside the browser viewport, and there is no CSS method to account for that.

    So at this time we recommend using the method that Ying provided.

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