I’m having problems with the horizontal scroll / overflow settings on my site and hoping someone can help me figure out what I’m doing wrong.
I’m trying to avoid having the page having extra horizontal space on the right, so that you can’t scroll right off the page. But when I’ve adjusted the settings to fix this, then I have problems scrolling vertically up and down the page. And sometimes the nav links that jump to different page sections stop working as well.
I’m confused about what I’m doing wrong here. Can someone please help?
Thanks!!
(I’m still fine tuning the text animations and interactions on the page, so you can ignore that.)
Setting Overflow: hidden on the Body element can prevent users from scrolling through your page content and affect navigation functionality. To maintain proper scrolling while preventing unwanted horizontal overflow, follow this approach:
Create a Div block wrapper directly under the Body element
Move all your page content inside this wrapper
Apply Overflow: hidden to the wrapper Div block instead of the Body
This solution will prevent horizontal scrolling while preserving vertical scroll functionality and nav link behavior. For troubleshooting overflow issues, you can enable X-ray mode in Canvas settings to easily identify problematic elements.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
Had the same issue on a client build,usually it’s a single element wider than the viewport (like a 100vw section with padding or an animation offset). Check each section in X-ray mode and set overflow-x: hidden on a top-level wrapper, not the body, to keep vertical scroll and anchor links working.
There are 2 elements that I noticed are taking up horizontal space in your page, you can set the overflow property to hidden for theSLIDER > TESTIMONIALS and IMAGE > BOTTOM TEXT elements as highlighted in the screenshot below:
The horizontal scroll should be gone with this styling. Hope this helps.
For future reference, you could also make use of custom property to fix this if you are not able to track which element is causing this issue as shown here.
