Framer handles responsive design through breakpoints, and the core rule is simple: you design desktop first, then adjust smaller screens, and changes flow downward rather than upward. Get that direction of inheritance clear in your head and most responsive headaches disappear. This is how the system works and how to keep your layouts clean across devices.

The three default breakpoints

A new Framer page starts with three breakpoints: desktop, tablet and phone. Desktop is your primary canvas at 1200px and above, where you do most of the layout work. Tablet covers roughly 810px to 1199px, and phone covers below that, with a 390px default width that matches a modern iPhone viewport. You can add custom breakpoints if a design genuinely needs them, but the three defaults handle the vast majority of sites.

Desktop-first and downward inheritance

Framer is desktop-first. You build the largest layout, and those styles automatically apply to tablet and phone unless you override them. The key detail: a change you make at a smaller breakpoint only affects that breakpoint and the ones below it. It does not cascade back up to larger screens.

That means you set up the desktop layout once, then step down to tablet and phone to make only the adjustments each size needs. You are not rebuilding the page three times, you are refining a single design for narrower screens. If something looks wrong on desktop after you edited phone, check whether you accidentally changed the wrong breakpoint, because the inheritance only runs one way.

What actually changes at each size

Tablet usually needs light touches: dropping a three-column grid to two columns, easing font sizes down, tightening spacing. Phone is where the real work happens. Multi-column grids collapse to a single column, horizontal rows stack vertically, and full navigation menus typically convert to a hamburger. If you build with stacks and relative sizing on desktop, a lot of this reflows on its own before you touch anything.

Habits that keep breakpoints clean

Use stacks (Framer's flex layout) rather than absolute positioning wherever you can, because stacks reflow naturally as the screen narrows. Lean on relative units and fill widths instead of hard pixel widths so elements adapt instead of overflowing. Set your desktop layout properly before you start editing smaller sizes, since every override you make downstream inherits from it. And always preview the real breakpoints rather than trusting the canvas, because text wrapping and image scaling behave differently once rendered.

One common mistake is over-editing. Because inheritance does the heavy lifting, you often need far fewer manual changes than you expect. If you find yourself adjusting every element on phone, the desktop layout probably was not built responsively in the first place.

When custom breakpoints earn their place

The three defaults suit most projects, but a data-dense dashboard, a large-format landing page or an unusual layout can justify an extra breakpoint. Add one only when a real layout break happens at a specific width, not preemptively, because every extra breakpoint is another state you have to maintain on future edits.

Want a Framer site that holds up cleanly from wide desktop down to small phones without fragile overrides? Book a discovery call and we will build the responsive structure to match your content.