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

To disable horizontal scroll on your Webflow site while keeping vertical scroll active, you need to prevent overflow on the body and html, and double-check for any elements that extend beyond the viewport width.

1. Set Overflow Hidden on Body and HTML

• Open the Webflow Designer.
• Select the Body (All Pages) element.
• In the Style panel, set Overflow: Hidden for the X-axis (horizontal).
• Under Layout > Overflow, choose Hidden for the horizontal option.
• Do the same for the HTML tag (or add custom CSS in your project if needed):
• Go to Project Settings > Custom Code > Inside tag and add:
  • <style>html, body { overflow-x: hidden; }</style>

2. Identify Overflowing Elements

• Use Webflow’s Preview Mode or publish the site and open it in Chrome.
• Press F12 (Developer Tools), then go to Elements > Body.
• Check if any element causes the page to scroll horizontally.

Common causes:

• Fixed-width elements wider than 100vw.
• Negative margins pushing elements off-screen.
• Interactions or animations that move elements outside the viewport.

3. Adjust or Correct Problem Elements

• Select any offending element in Webflow Designer.
• Set a max width of 100% or limit width using relative units (%, vw) instead of fixed px when necessary.
• For image or media embeds, ensure they’re responsive or have styles like Width: 100% and Max-Width: 100%.

4. Check for Scrollbar Styling or Scripts

• If using any custom scrollbar styles or third-party scripts (like fullPage.js), those could affect overflow.
• Review custom code in Page Settings or Project Settings > Custom Code to make sure nothing re-enables horizontal scrolling.

Summary

To stop horizontal scroll in Webflow, set "overflow-x: hidden" on both the body and html tags, and identify any elements that exceed the viewport width using tools like Chrome DevTools. Make layout adjustments as needed to keep all content within 100vw.