How can I disable the horizontal scroll on my Webflow site while keeping the vertical scroll enabled?

If your Webflow site is allowing horizontal scroll, it's likely caused by elements extending beyond the viewport. Here's how to remove horizontal scrolling while keeping vertical scroll functional.

1. Check for Overflowing Elements

• In Webflow Designer, preview your site at 100% zoom and look for any content extending off the right edge of the screen.
• Use Navigator panel to inspect Sections, Div Blocks, and other containers.
• Look for elements with an explicit width greater than 100vw or with large negative margins or transforms.

2. Set Overflow to Hidden on Body or Wrapper

• Select the Body (Body 1) element in Webflow.
• In the Style panel, scroll to the Layout section and set:
• Overflow: Hidden
• This will hide any content that spills outside the viewport.

Note: This might override intended overflow behavior (like sticky or animated elements), so apply it carefully.

• Alternatively, add a main div wrapper around all page content and:
• Set overflow-x: hidden
• Keep overflow-y as auto or visible

3. Add Overflow-x Hidden in Custom Code (Optional)

• Go to Project Settings > Custom Code.
• Under Inside Head tag, paste:
• <style>body { overflow-x: hidden; }</style>
• Click Save and republish your site.

This ensures browsers universally suppress horizontal scroll, but only use this if necessary.

4. Use Chrome DevTools to Identify Offending Element

• Open your live site.
• Hit F12 or right-click and select Inspect.
• Use the Elements panel and toggle through elements while watching the bubble icon at the top right (it shows when an element overflows).
• Once identified, go back to Webflow and adjust the styling for that element.

Summary

To disable horizontal scroll but keep vertical scroll, ensure no elements exceed viewport width and set overflow-x: hidden on the Body or a wrapper div. You can also add a CSS snippet in Custom Code to reinforce this at a global level.