How to fix horizontal scrolling on mobile in Webflow?

An unwanted horizontal scrollbar on mobile makes a site feel broken. Visitors swipe sideways and see empty space or content overflowing the viewport. This issue is common in Webflow and almost always caused by elements that extend beyond the screen width.

Finding the overflowing element

The first step is identifying what's too wide. The fastest method is to open your browser's developer tools (right-click, Inspect), then look at the Elements panel. Scroll horizontally and watch for elements that extend past the viewport boundary.

In Webflow's Designer, you can also switch to the mobile breakpoint and check each section's width in the Style panel. Any element showing a width greater than 100% or a fixed pixel width wider than the viewport is a likely culprit.

Common causes and fixes

Text or headings without word-break. Long words or URLs in text blocks can push past the container. Add word-break: break-word or overflow-wrap: break-word to the text element's custom properties.

Fixed-width elements. Images, divs, or sections with a pixel width set at the desktop breakpoint that exceeds mobile viewport width. Override the width to 100% on the mobile breakpoint.

Negative margins. Elements styled with negative left or right margins can extend beyond the page wrapper. Reset margins to zero on smaller breakpoints or use padding instead.

Padding on full-width sections. Adding left and right padding to elements that are already 100% wide pushes the total width past the viewport. Use box-sizing: border-box (Webflow sets this by default, but custom code can override it) or reduce padding values on mobile.

Hidden elements with visibility settings. Elements hidden via opacity or display:none may still occupy layout space or have positioning that affects the page width. Use Webflow's built-in hide/show per breakpoint instead.

Embedded code or widgets. Third-party embeds with fixed widths (calendars, maps, iframes) often ignore responsive rules. Wrap them in a container with overflow: hidden and max-width: 100%.

The body or page wrapper has extra width. Check that your body element and main wrapper don't have a fixed width or horizontal padding that accumulates. They should be set to 100% width.

A quick CSS fix

If you've tried everything and can't locate the source, add this to your project's custom CSS (Project Settings > Custom Code > Footer):

html, body {
  overflow-x: hidden;
}

This hides horizontal overflow globally. It's a band-aid, not a fix — the underlying element is still oversized. Use it only as a last resort while you track down the real cause.

Prevention

Set element widths using percentages or the auto setting rather than fixed pixels. Test on the mobile breakpoint frequently during the build. Use Webflow's built-in spacing controls rather than negative margins for layout adjustments.