Why does my Webflow site look broken on mobile?

Look at the breakpoint that matches the phone

Webflow starts on the desktop breakpoint. Styles set there flow down to tablet, mobile landscape, and mobile portrait, and they also flow up to the larger breakpoints if you have added those. Tablet covers screens 991px wide and below. Mobile landscape covers 767px and below. Mobile portrait covers 479px and below. A change you make on tablet therefore shows on both phone breakpoints unless you override it again on one of them.

Only Style panel changes cascade. Element settings, the order of elements in the Navigator, and replacement of text or images apply to every breakpoint at once. You cannot drag a block into a new position for phones only. Deleting an element deletes it everywhere.

Click the mobile portrait icon in the canvas bar before you change a phone style. Blue or orange labels in the Style panel show whether the value was set on this breakpoint or inherited. If the label is inherited, the desktop or tablet value is what the phone is using.

Find the element wider than the screen

Sideways scrolling usually means something is wider than the viewport, or a negative margin pushes it outside. The Body element cannot be given a custom width. Anything wider than the screen overflows it. A paragraph with default settings wraps as the canvas gets narrower. A fixed pixel width does not.

Example: a photo set to 500px looks fine on desktop and often on tablet. On a phone narrower than 500px the image stays 500px and the page scrolls sideways. Set that image to 100% width, or give it a max width, on the breakpoint where it overflows. Percentage width follows the parent. Pixel width does not.

A three-column row with each column set to 300px has the same problem. On mobile portrait, select the row while you are on that breakpoint and stack it, or set each column to 100% width. Because the override is on mobile portrait, the desktop row can stay in three columns.

Drag the edge of the canvas while preview is on, and also switch the breakpoint icons. A layout can look fine at the default mobile portrait width and still overflow a little wider or narrower. X-ray mode in canvas settings makes the overflowing box easier to see. Hover the empty space to the right while you scroll so you can see which element crosses the edge.

Hide overflow on the parent, not the whole page

Overflow set to hidden on a parent clips children that stick out. Select the wide element, select its parent section or div, open Style panel, Size, and set Overflow to hidden. Scroll left and right to see if the extra gap is gone.

Do not put that setting on the Body. Hidden overflow on the Body can clip the rest of the page and stop people from scrolling down. If you need a page-wide clip, wrap the page content in a div and set overflow on that wrapper after the content is inside it.

Position sticky stops working if any parent uses overflow hidden. If a sticky nav breaks after the clip, move the hidden overflow to a section that does not wrap the nav.

An interaction can also leave a horizontal gap. A heading that starts offscreen is still part of the page width when it loads, even if it ends in the right place. Clip the section that contains that heading, not the Body. If the motion itself no longer plays after publish, treat that as a separate check from this layout fix.

Hidden elements and type that collide

To hide a block on one breakpoint, set its display to none in the Style panel. Do not delete it. Display is a style, so it affects every element with that class, and it cascades downward. None on tablet hides the block on tablet and on both phone sizes. None on mobile portrait hides it only at that smallest range.

The hidden block is still in the published HTML. It is only invisible. If a phone menu and a desktop menu share one class, hiding the class hides both. Use a separate class for the block that should disappear.

Text and spacing inherit the same way. Desktop font size and top margin still apply on the phone until you override them there. Overlapping text is often a heading size or a fixed height that was never reduced. Select the heading on mobile portrait and lower the size, or remove the fixed height so the text can wrap.

Example: a hero heading at 72px with a 400px tall div looks correct on desktop. On mobile portrait the heading wraps outside the div and covers the button under it. On that breakpoint, reduce the heading size and set the div height to auto.

Confirm it on a phone after you publish

Designer preview is the place to find the rule. A handset is the place to confirm it. Publish, then open the live URL on a phone. Scroll sideways on the homepage and on one inner page. Tap the main button. Open the menu if you hid the desktop nav.

Canvas settings can also preview a typed width, and Expand canvas shows the breakpoints side by side. Use those to compare. Then check one real phone. The address bar and the browser's own buttons change how much of the page you see.

Example: mobile portrait looks correct in the Designer, but the published page still scrolls sideways. Look for an embed, a map, or an image that still uses a pixel width. Set a max width on that element's parent and test the live page again.