[Resolved] Horizontal scoll bar with full width blocks

Home Forums Support [Resolved] Horizontal scoll bar with full width blocks

Home Forums Support Horizontal scoll bar with full width blocks

  • This topic has 9 replies, 4 voices, and was last updated 2 months ago by David.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #2245201
    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

    #2245302
    Ying
    Staff
    Customer Support

    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.

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

    #2245558
    Fernando
    Customer Support

    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.

    #2245777
    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!

    #2245801
    Fernando
    Customer Support

    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.

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

    #2245838
    David
    Staff
    Customer Support

    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;
    }
    #2245841
    Daniele

    Thanks David,
    it worked

    #2245874
    David
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.