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?

To fix horizontal scroll and center a footer form on mobile in Webflow, you need to adjust layout settings and overflow properties.

1. Disable Horizontal Scroll on All Pages

• Go to your Webflow project and open the Designer.
• Select the Body element or the topmost parent section.
• In the Style panel, set these properties:
• Overflow: Hidden (on the Body or a parent Wrapper/Page Wrapper div)
• Check for any elements that:
• Have fixed widths greater than 100% or viewport width (VW).
• Use negative margins, which can cause overflow.
• Are positioned absolutely outside the viewport.
• Remove or adjust these elements, or wrap the site content in a div and set overflow: hidden on that wrapper.

2. Fix Alignment Issues on Mobile

• On each mobile breakpoint (Tablet, Mobile Landscape, Mobile Portrait), do the following:
• Select any conflicting section or element causing width overflow.
• Ensure Width is set to 100% or uses relative units like VW or %.
• Avoid setting elements to min-widths larger than the screen.

3. Center the Footer Form on Mobile

• Select the Form Block inside your footer.
• Wrap it in a Div Block if it's not already wrapped.
• On mobile breakpoints:
• Set the wrapper Display: Flex
• Set Flex Direction: Vertical/Column
• Set Align Items: Center and Justify: Center
• Alternatively, set:
• The form wrapper’s margin-left and margin-right to auto
• The text-align: center (if elements inside need centering)

Summary

To stop horizontal scroll, set overflow: hidden on your Body or page wrapper and remove overflowing elements. To center your footer form on mobile, use flexbox or auto‐margins in the form’s wrapper and adjust styles per mobile breakpoint.