How do I disable Horizontal Scroll on all pages in Webflow, for both desktop and mobile, in order to fix alignment issues on mobile? Additionally, how can I center the form in the footer for mobile in Webflow?
TL;DR
- Set overflow-x: hidden on the body and html using both the Style panel and custom code to prevent site-wide horizontal scroll.
- Audit all elements to ensure none exceed 100% width or cause layout overflows.
- Center the footer form on mobile by applying Flexbox or margin: 0 auto, and adjust alignment within responsive settings.
To prevent unwanted horizontal scroll across all devices and center a footer form on mobile in Webflow, you'll need to adjust both global overflow settings and element-specific alignments. Here's how:
1. Disable Horizontal Scroll Site-Wide
Unintended horizontal scroll is usually caused by overflowing elements. To remove it across all pages and screen sizes:
- Select the
<body>or main wrapper (BodyorPage Wrapperclass) - Go to the Style panel
- Set Overflow to Hidden
- Choose Overflow: Hidden for the X-axis (horizontal overflow)
- Also apply to the
html/bodyvia custom code (since Webflow doesn’t allow you to target thehtmlelement in the Designer): - Go to Project Settings > Custom Code > Inside <head> tag
- Paste this inline style:
<style>html, body { overflow-x: hidden; }</style>
- Publish the site to apply changes—this doesn’t reflect in the Designer preview
2. Check All Elements for Overflowing Widths
- Inspect any elements with fixed widths, large margins or positioning shifts that spill outside the viewport
- On mobile views, make sure no elements are set wider than 100%
- Use Webflow’s Navigator to manually test sections and wrappers for max-width issues
3. Center Footer Form on Mobile
To center a form element inside the footer on smaller screens:
- Go to the Mobile view in the Webflow Designer
- Select the Form Block or container within the footer
- In the Style panel:
- Set its Display to Flex
- Choose Direction: Vertical (Column) if stacking inputs
- Set Justify: Center
- Set Align: Center
- Or, if using a grid or block layout:
- Set Margin: 0 auto
- Optionally ensure Text Align: Center if needed for smaller input fields or text
- Check for any Max Width or Padding settings on parent containers that might push the form off-center—ensure they’re set responsively
Summary
To fix horizontal scroll, set overflow-x: hidden on the body and HTML and ensure no elements exceed 100% width. To center a footer form on mobile, use Flexbox or auto margins, and check responsive styles to keep alignment consistent across breakpoints.