Framer breakpoints, and how to stop your page breaking on mobile

Framer breakpoints come in three sizes: Desktop, Tablet and Phone. You build on Desktop, and your changes flow down to the two smaller sizes. Change something on a smaller size and it becomes an override that stays put. Almost every mobile bug in Framer comes back to one thing, a fixed pixel width that nobody switched to fill.

What the three Framer breakpoints really mean

Framer's own product pages show the canvas tabs labelled Desktop 1200 and Tablet 810. The published code on framer.com says the same. Its responsive images are served with rules for min-width 1200px, for 810px up to 1199.98px, and for max-width 809.98px. So Desktop covers 1200 and above. Tablet covers roughly 810 to 1199. Phone covers everything below 810. Your layout has to survive all three lines.

Changes flow down, overrides do not flow up

Edit on Desktop and the change flows into Tablet and Phone. Edit on Phone and you have made an override that lives only there. Framer highlights every property you have overridden, because their values no longer match the primary breakpoint and so stop inheriting changes. To undo one, click the property label and hit Reset Override. This is why you finish the Desktop layout first, then open Phone. Every override you set too early is a change you end up making twice.

Fixed widths are why the page overflows

Framer has a short troubleshooting article on this, and it gets it right. If your site does not fill the screen on the Phone breakpoint, one element is almost always wider than the phone screen. Look for two things. A fixed width, like 321px, where you wanted 100% or 1fr. And a Max Width bigger than a phone screen. Fix both in the Size section of the right panel. Set Width to 100% or 1fr, and strip Max Width off everything except your content wrapper. Then republish, because canvas changes only reach the live site when you publish.

Stack direction and padding do the rest

On Phone, most horizontal stacks need to become vertical. Select the stack, flip the direction, and cut the gap below your desktop value. Then cut section padding. A 120 pixel top and bottom looks generous on desktop and looks like an empty screen on a phone. And 80 pixels of side padding leaves a phone visitor reading a narrow strip of text. Forty and twenty are sane starting points. Walk each section at the Phone breakpoint and shrink anything that makes the visitor scroll through nothing.

Type needs its own pass

A 64 pixel headline wraps to six lines on a phone and pushes your button below the fold. Fix it once in the text style, not layer by layer. Open Assets in the left sidebar, open the style, and in the Edit Style dialog find the Breakpoints section and click Add Breakpoint. Framer gives you Desktop (L), Tablet (M) and Mobile (S). For each one you can set font size, line height, letter spacing and paragraph spacing. Set your H1 there once and every H1 on the site follows it.

Test it the way visitors will see it

One quirk first. Framer makes a breakpoint unavailable when it is wider than your browser window or monitor resolution, so on a small laptop the Desktop preview can grey out. Framer's fix is to widen the window, move to a larger monitor, or publish and preview on the live URL. Then run the real test in a browser. Drag the window slowly from wide to narrow. Watch for the exact point where a row stops fitting, and fix it there rather than at the breakpoint boundary. After that, open the live URL on your own phone, over mobile data, and scroll the whole page. Device emulation will not show you a slow network or an in-app browser toolbar.

A ten minute responsive pass

Work top to bottom, one section at a time. Set every wrapper to 100% or 1fr. Keep exactly one Max Width, on the content wrapper. Flip horizontal stacks to vertical on Phone. Cut your section padding in half. Add breakpoint sizes to the H1, H2 and body text styles. Republish, open the page on a phone, and check that you can see the first button without scrolling. This pass catches most of what goes wrong, and once you have done it a few times it takes about ten minutes a page.