Introduction
Framer breakpoints are separate layouts for separate screen widths, and they inherit from the Primary breakpoint, which is desktop by default, downward. Most confusion comes from that inheritance: a change made on desktop flows down until a smaller breakpoint has already overridden that property, at which point it stops.
Once that rule is clear, most responsive problems in Framer stop being mysterious.
Inheritance Is the Whole Model
Design the desktop layout first and the tablet and phone layouts inherit it. The moment you change a property on the phone breakpoint, that property is pinned there, and later desktop edits to the same property will no longer reach it.
This is why a site can look correct on desktop and broken on mobile after an edit that seemed global. It was global, right up until it hit a property somebody had already overridden.
Design Widest First
Work down from the largest breakpoint. Going the other way means overriding properties on the way up, which builds the exact pinning problem above, and you end up maintaining three layouts instead of one with two adjustments.
Saves time | Creates rework |
|---|---|
Desktop first, then adjust down | Phone first, then scale up |
Stacks and fill widths that reflow on their own | Fixed pixel widths set per breakpoint |
Text that wraps naturally | Manual line breaks tuned to one width |
Checking the awkward width between tablet and phone | Testing only at the three preset sizes |
Let Layout Do the Work
Most responsive behavior should come from stacks, fill widths and wrapping rather than from per breakpoint values. Every hardcoded pixel width is a value you now maintain in three places, and the ones that break are always the ones you forgot existed.
Test Between the Presets
The three preset sizes are the widths least likely to break, because they are the ones everyone checks. Drag the canvas width slowly; the failures live in the gaps, usually where a long word meets a narrow column.
Before You Publish
Most responsive trouble traces back to structure rather than to breakpoints, which is why how a CMS is modeled matters as much as any width setting. Resize the published site in a browser rather than trusting the canvas. Framer renders the real thing differently enough that a layout can pass on canvas and still collapse in a browser at an in-between width.
