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?
- Set
overflow-x: hiddenon<body>and<html>and fix any elements with widths like100vwby using100%or settingoverflow: hiddenon parent containers. - In mobile breakpoints, center the footer form by using Flexbox with vertical layout, center alignment, responsive max-width (e.g., 90%), and auto horizontal margins.
To prevent unwanted horizontal scrolling and fix alignment issues on mobile, you'll need to adjust layout settings and overflow behavior. Additionally, centering a footer form on mobile requires style tweaks in the mobile breakpoints.
1. Disable Horizontal Scroll on All Pages
Enable Overflow Hidden on the
<body>and<html>elements:Go to Pages Panel → click the gear icon beside your page.
Under Custom Code > Inside Head Tag, add this line:
<style>body { overflow-x: hidden; }</style>Identify and Fix Overflowing Elements in Designer:
In the Designer, select each Section, Div, or Block and check their Width settings.
Make sure no element has a width set to 100vw or similar that ignores scrollbar width. Instead, use 100% where possible.
For containers that wrap dynamic content like sliders, grids, columns, set
Overflow: Hiddento prevent child elements from pushing content horizontally.Use the Navigator Panel to inspect elements:
Turn on the mobile view and scroll right—select any highlighted or overflowing elements.
Apply overflow: hidden to the parent containers where needed.
2. Center the Footer Form on Mobile
Goto Mobile Breakpoint (Tablet/Mobile):
Switch to the mobile view in the top bar of the Designer.
Select the Footer Form’s Parent Container:
Make sure the form is wrapped in a
Div Blockor container.Set the container to Flex → Vertical (Column).
Use Align: Center and Justify: Center if needed.
Adjust Form Width for Mobile:
Select the Form Block and set:
- Max Width: e.g.,
90% - Margin: Auto (left and right) to center it horizontally.
- Remove any left/right padding or absolute positioning that may break centering.
- Max Width: e.g.,
Check for Padding Issues:
On small screens, too much padding or
fixedwidths can break alignment. Switch those to%widths or useVW/Auto.
Summary
To remove horizontal scrolling, apply overflow-x: hidden to the body and fix any elements set to widths that exceed the screen. To center a footer form on mobile, use Flexbox with center alignment settings and responsive width and margins.