Framer breakpoints are device-specific layout versions that control how your site looks on different screen sizes. By default Framer gives you desktop, tablet, and phone breakpoints. You design each one, and Framer serves the right layout based on the visitor’s screen width, ensuring your site looks correct everywhere.
Key Takeaways
- Framer ships with three default breakpoints: desktop, tablet, and phone, covering the most common screen widths.
- Changes flow from the largest breakpoint down, so you design desktop first and then refine smaller sizes.
- You can add custom breakpoints for large monitors or specific devices when a project needs them.
- Stacks, fixed sizing, and relative units make layouts adapt smoothly between breakpoints.
- Testing on real devices catches spacing and typography issues that the canvas can hide.
What Breakpoints Are and Why They Exist
Every visitor reaches your website on a different screen. A designer might view it on a 27-inch monitor, a commuter on a phone, and a manager on a tablet. A breakpoint is the point at which your layout switches to a version designed for that range of screen widths. Without breakpoints, a layout built for a wide desktop would look cramped and broken on a phone.
Framer handles this visually. Instead of writing media queries in code, you see each breakpoint as a separate frame on the canvas. You design the desktop version, then move to tablet and phone and adjust what needs to change. Framer stores these as connected variants of the same page, so content stays linked while layout adapts.
Why responsive design is non-negotiable
More than half of global web traffic now comes from mobile devices. A site that breaks on phones loses visitors and search ranking, since Google uses mobile-first indexing. Breakpoints are the mechanism that keeps your design intentional on every screen rather than left to chance.
The Three Default Framer Breakpoints
Framer gives you three breakpoints out of the box, and most projects need only these.
Desktop
The desktop breakpoint is your starting point and typically targets screens around 1200 pixels wide and above. This is where you establish the full layout, the visual hierarchy, and the spacing system. Decisions made here cascade downward, so it pays to get desktop right before touching the others.
Tablet
The tablet breakpoint usually covers screens between roughly 810 and 1199 pixels. Tablets often need multi-column layouts collapsed into fewer columns, slightly smaller headings, and adjusted padding. Many sites need only light changes here, since a well-built desktop layout often holds up reasonably well at tablet width.
Phone
The phone breakpoint targets screens below about 810 pixels and demands the most attention. Navigation usually becomes a menu button, columns stack vertically, font sizes shrink, and touch targets need to be large enough to tap comfortably. This is where most layout problems appear, so budget real time for it.
How Breakpoint Inheritance Works
Understanding inheritance is the single most important concept for working efficiently with Framer breakpoints. Changes flow downward from larger breakpoints to smaller ones. When you edit the desktop layout, those changes also apply to tablet and phone unless you have already overridden them at that smaller size.
The practical workflow
Design desktop completely first. Then move to tablet and adjust only what breaks. Then move to phone and do the same. If you edit a smaller breakpoint and then change desktop, the smaller breakpoint keeps its override. This top-down flow prevents the frustrating loop of fixing the same element repeatedly.
A common mistake is jumping between breakpoints randomly. That creates a tangle of overrides that are hard to track. Work in order, largest to smallest, and your layout stays predictable.
Adding Custom Breakpoints
The three defaults cover most projects, but Framer lets you add custom breakpoints when a design genuinely needs them. Click the breakpoint controls at the top of the canvas and add a new one at the width you choose.
When custom breakpoints help
Add a large desktop breakpoint around 1440 or 1920 pixels when your design should expand gracefully on big monitors instead of leaving wide empty margins. Add an intermediate breakpoint when a layout looks awkward in the gap between tablet and phone, which sometimes happens with content-heavy pages. Be disciplined though. Each extra breakpoint is another layout to maintain and test, so add one only when a real problem requires it.
Building Layouts That Adapt Smoothly
Breakpoints define where layouts change, but good responsive structure reduces how much you have to change. A few Framer techniques make layouts flexible by default.
Use Stacks for automatic layout
Stacks arrange child elements in a row or column with consistent spacing. Because a Stack manages its own gaps and alignment, it adapts cleanly when you switch the direction from horizontal to vertical on smaller breakpoints. A three-column row of feature cards becomes a single stacked column with one property change.
Choose the right sizing
Framer offers fixed, relative, and fill sizing. Fixed sizing keeps an element at an exact pixel width. Relative sizing scales it as a percentage of its parent. Fill makes it expand to take available space. Use relative and fill for containers and sections so they breathe across screen sizes, and reserve fixed sizing for elements that must stay a precise size, such as icons.
Set min and max widths
Apply a max width to text containers so lines never stretch uncomfortably wide on large screens. Apply min widths to prevent elements from collapsing too far on small screens. These constraints do quiet, important work between your defined breakpoints.
Typography and Spacing Across Breakpoints
Type and spacing rarely translate one-to-one between screen sizes. A 64-pixel hero heading that looks bold on desktop can overflow a phone screen. On the phone breakpoint, scale headings down to a readable size, often 32 to 40 pixels for a hero. Body text usually stays around 16 to 18 pixels everywhere, since smaller is hard to read on any device.
Adjust spacing deliberately
Generous section padding looks elegant on desktop but wastes precious vertical space on a phone. Reduce padding and margins at smaller breakpoints so content stays visible without endless scrolling. Consistent spacing steps, such as multiples of 8 pixels, keep these adjustments tidy. For a deeper look at structuring pages well, our web design best practices guide covers layout principles that apply across every breakpoint.
Testing and Common Breakpoint Mistakes
The Framer canvas is a useful preview, but it is not a substitute for real testing. Use the preview mode and resize the window slowly to watch the layout shift. Then check the published site on an actual phone and tablet, since touch interaction and real screen density reveal issues the canvas hides.
Mistakes to avoid
- Designing phone first then fighting inheritance when desktop changes overwrite your work.
- Leaving text containers without a max width, causing long unreadable lines on wide screens.
- Forgetting to enlarge tap targets, making buttons frustrating on mobile.
- Adding too many custom breakpoints and creating layouts that are hard to maintain.
- Testing only in the browser and never on a real device.
Responsive layout also affects load performance, since heavy images and oversized assets hurt mobile most. Pairing solid breakpoints with the steps in our website speed optimization guide keeps your site fast on every device. If you want this handled end to end, our team builds fully responsive Framer sites tested across the full device range.
Need a Framer site that looks flawless on every screen? Our designers build responsive layouts that hold up from large monitors to small phones, with no broken breakpoints. Contact our Framer team to get started, or explore project options on our pricing page.
Frequently Asked Questions
How many breakpoints does Framer have by default?
Framer includes three default breakpoints: desktop, tablet, and phone. These cover the most common screen sizes and are enough for most projects. You can add custom breakpoints, such as a large desktop size, when a specific design needs one.
Should I design desktop or mobile first in Framer?
Design desktop first. Framer breakpoint changes flow downward from larger to smaller sizes, so building desktop first and then refining tablet and phone keeps your overrides predictable and avoids repeated rework.
Can I add custom breakpoints in Framer?
Yes. You can add custom breakpoints at any width using the breakpoint controls above the canvas. A large desktop breakpoint is common for big monitors. Add custom breakpoints only when a real layout problem requires one, since each adds maintenance.
Why does my Framer layout break on mobile?
Most mobile breakage comes from fixed-width elements, missing Stack settings, oversized typography, or padding that was not adjusted for small screens. Switch containers to relative sizing, stack columns vertically, and scale down headings on the phone breakpoint to fix it.