Framer responsive design is one of those things that looks simple until it isn't. You build a gorgeous desktop layout, preview it on your phone, and suddenly your carefully spaced hero section is a scroll marathon and your navigation has disappeared off the right edge of the screen. We've all been there.
At DiverseKit, we sell Framer templates, so we see the same patterns over and over. The designers who build the best responsive sites aren't the ones who know the most tricks; they're the ones who understand Framer's breakpoint system from the ground up and make a few key decisions early. This guide covers those decisions: how breakpoints work, how to choose the right sizing mode, when to use Stacks, and which strategy saves time on real projects.
If you're new to Framer, you might want to start with our Framer components tutorial first. This post assumes you know your way around the basic layout tools and want to get responsive behavior right. For official reference, Framer's own responsive design documentation covers the technical specifics we build on here.
How does Framer responsive design actually work?
Framer handles responsive design through a breakpoint system that should feel familiar if you've used any modern design tool. You get three default canvas sizes: Desktop, Tablet, and Mobile. Each one is an independent layout layer. When you adjust an element on the mobile breakpoint, you're not scaling down the desktop version; you're creating a separate set of layout rules for that width.
This is important because it means Framer doesn't use fluid percentage-based scaling by default. An element positioned at x: 200 on desktop stays at x: 200 on mobile unless you explicitly move it on the mobile breakpoint. That can feel rigid at first, but it's actually what gives you pixel-level control over each breakpoint.
You add a breakpoint by clicking the device icons at the top of the canvas or by dragging the canvas width until Framer offers to create a new breakpoint at that size. We recommend sticking with the standard trio: Desktop at 1440px or wider, Tablet at 768px, and Mobile at 375px. These widths cover roughly 95% of real traffic for most sites. Adding more breakpoints rarely improves the layout and almost always makes maintenance harder.
Each breakpoint inherits from the one above it. So mobile inherits from tablet, which inherits from desktop. If you don't touch an element on a given breakpoint, it keeps the position and size from its parent. This inheritance chain is why the best workflow is to design desktop first, then work down. Change only what needs to change at each smaller width. If you find yourself repositioning every single element on mobile, your desktop layout is probably too complex.
What's the best way to approach Framer responsive design across three breakpoints?
The cleanest approach is what we call "design wide, then subtract." Start with your full desktop composition. Get the spacing, typography, and imagery exactly right at 1440px. Then step down to tablet and ask one question: what breaks?
Usually it's the navigation, the hero grid, or a multi-column section. Fix those specific elements. Leave everything else alone so it inherits cleanly from desktop. Then step down to mobile and repeat. Most well-built Framer sites need only a dozen or so manual adjustments across the tablet and mobile breakpoints combined.
Here's a practical checklist we use when adapting our own templates:
- Navigation: Switch from a horizontal menu to a hamburger menu. This is usually the first change.
- Hero sections: Stack side-by-side layouts into a single column. Move the image below the text on mobile.
- Grids: Convert multi-column grids to single or double columns. A four-column feature grid becomes two columns on tablet and one on mobile.
- Typography: Reduce heading sizes by roughly 20-30% on mobile. Body text can usually stay the same size.
- Spacing: Cut section padding in half on mobile. A 120px gap between sections on desktop should drop to 60px or less on phone.
- Images: Check that large images don't overflow. Set widths to Fill or Relative so they scale within their containers.
For a deeper look at keeping your navigation clean across all three breakpoints, our Framer sticky header guide covers the specific settings that prevent headers from breaking on scroll.
Fill, Fixed, or Relative: which sizing mode should you use?
Use Fill for backgrounds and containers that should always span edge to edge, Fixed for logos and small UI elements that must stay exact, and Relative for anything that needs proportional scaling. Those are the three rules, and picking the wrong one is the root cause of most responsive layout bugs we see.
Fill means the element stretches to match the full width or height of its parent container. Use Fill for backgrounds, section wrappers, and any element that should always span its container edge to edge. If you set a text block to Fill width, it'll stretch across the whole phone screen on mobile and the full desktop width on desktop. That's usually what you want for content containers.
Fixed means the element stays at an exact pixel size regardless of screen width. Use Fixed for logos, icons, and small UI elements that shouldn't scale. A 48px square logo should stay 48px on every breakpoint. The danger with Fixed is using it for text containers or images. A 400px-wide image set to Fixed will overflow a 375px phone screen by 25px, and Framer won't auto-scale it down.
Relative is the middle ground. It sizes the element as a percentage of its parent. A Relative width of 50% means the element takes up half its container. This is useful for split layouts, card grids, and any situation where you want proportional scaling. Relative is often the best choice for images inside content sections because it lets them shrink gracefully without you manually resizing them on every breakpoint.
The most common mistake we see is mixing Fixed widths with Fill widths in the same container. If your section wrapper is set to Fill (which it should be) but your content card inside it is set to 600px Fixed, that card will overflow on mobile. The fix is usually to change the card to Fill width with internal padding, or to set it to Relative at 100% with a max-width.
When should you use Stacks instead of Frames?
For responsive design, Stacks are almost always the better choice for any group of items that might need to re-flow on smaller screens. Frames are Framer's default containers: you position elements inside them using absolute x and y coordinates. Stacks are auto-layout containers that arrange children automatically based on direction, gap, distribution, and alignment you set.
When you resize to a smaller breakpoint, a Stack can re-flow its children automatically. A horizontal Stack of three cards becomes vertical on mobile with a single setting change. A Frame with three absolutely positioned cards requires you to drag each one manually.
We use Stacks for navigation items, feature cards, pricing tables, footer columns, and any list that might re-order on smaller screens. We use Frames for hero sections with overlapping decorative elements, complex compositions where precise positioning matters, and background images with specific focal points.
If you're building from scratch, start with Stacks everywhere, then switch to Frames only when you need overlapping or precisely positioned layers. It's much easier to relax a Stack into a Frame for one section than to manually position twenty elements when a Stack would have handled it.
Which breakpoint strategy is right for your project?
For the vast majority of Framer sites, desktop-first with inheritance is the right choice. It's fast, it's maintainable, and Framer's breakpoint inheritance is built to support it. But not every project needs the same responsive approach. Here's how the three common strategies compare for Framer sites.
| Strategy | Best for | Setup time | Maintenance | Trade-off |
| Desktop-first with inheritance | Marketing sites, portfolios, landing pages | Low | Low | Requires discipline to avoid over-designing desktop |
| Mobile-first | Content-heavy sites, blogs, text-first designs | Medium | Low | Desktop can feel under-designed if you don't expand upward |
| Component breakpoints | Complex dashboards, apps with dense UI | High | High | Maximum control, but every element needs manual tuning |
Mobile-first works well if your primary audience is on phones, but in our experience, most Framer sites are designed for a professional audience that browses across all three device types. Component breakpoints, where you set custom breakpoints on individual elements, are available in Framer but we rarely use them. They add complexity without solving problems that the three standard breakpoints can't handle. Save them for genuine edge cases, like a data visualization that needs to reflow at a very specific width.
Testing your layout on real devices and in preview
Previewing on the canvas isn't enough. Framer's canvas preview is useful for quick checks, but real devices have different pixel densities, safe areas, and scroll behaviors. The most reliable testing method combines Framer's preview mode, real device checks, and landscape orientation verification.
First, use Framer's preview mode and drag the width slider from desktop down to mobile. Watch for elements that snap awkwardly or overflow. Pay special attention to text blocks that get too narrow and images that suddenly jump in size.
Second, publish to a staging link and open it on an actual phone and tablet. Check tap targets are at least 44px tall on mobile. Check font rendering, some typefaces look lighter on iOS than Android.
Third, test landscape orientation on mobile. A surprising number of users hold their phones sideways. Your mobile breakpoint should handle 667px-wide landscape gracefully, which usually means letting some elements stay in a two-column layout.
Finally, check the largest desktop size. Stretch your browser to 1920px or wider. If your content is set to Fill width without a max-width container, lines of text can become impossibly long to read. We cap content width at around 1200px on desktop and center it, so the layout stays comfortable on ultrawide monitors.
Three templates that handle responsive design well
Every template in our marketplace is built with the principles above, but a few are especially good examples to study if you want to see responsive Framer design in practice.
Sidereal ($29) is a clean, minimal template that uses Stacks extensively. Its pricing section reflows from three columns on desktop to a single stacked column on mobile with almost no manual breakpoint adjustments. It's a great reference for how far you can get with smart Stack choices.
Assistify ($59) has a more complex hero section with overlapping images and text. It uses a Frame for the hero composition but switches to Stacks for everything below. The breakpoint work is minimal because the designer made one critical decision early: the hero image is set to Relative width, so it scales naturally without repositioning.
GrowiX ($79) includes a multi-section landing page with a feature grid, testimonials, and a pricing table. The testimonial cards use a horizontal Stack that automatically becomes vertical on mobile. If you're trying to understand how inheritance works in a real project, open GrowiX and watch how few elements need manual repositioning at each breakpoint.
You can browse all of these and more in our full Framer templates collection. Every template ships with Figma files too, so you can study the responsive structure in both tools.
Frequently asked questions
How many breakpoints should I use in Framer?
For most sites, three: Desktop, Tablet, and Mobile. Framer lets you add more, but each extra breakpoint increases maintenance time and rarely improves real-world layouts. Stick to the standard trio unless you have a specific reason to add a custom width.
What's the difference between Fill and Relative width?
Fill makes an element stretch to the full width of its parent container. Relative makes it a percentage of its parent's width. Use Fill for elements that should always span edge to edge. Use Relative when you want proportional scaling, like an image that takes up 50% of a split layout.
Should I design desktop-first or mobile-first in Framer?
Desktop-first is usually the better fit for Framer's inheritance system. Design your full desktop layout first, then work down to tablet and mobile, changing only what breaks. This approach matches how most Framer templates are built and keeps maintenance simple.
Build once, adapt everywhere
Framer responsive design doesn't have to be complicated. The sites that adapt well aren't the ones with the most breakpoints or the most complex constraints. They're the ones built with a clear plan: Stacks for re-flowing content, Fill and Relative for flexible sizing, and minimal manual adjustments inherited cleanly from a solid desktop foundation.
Start with those principles and you'll spend less time fighting your layout and more time polishing the details that actually matter. If you want to skip the setup work entirely, our Framer templates are built with responsive design baked in from the first frame.
