Framer Breakpoints
In this tutorial, I’ll show you how breakpoints work in Framer and how you can use them to edit your template for different screen sizes. It’s one of the most important things to understand before you start customizing your website.
What are breakpoints?
Websites look different on each device size.
On desktop, you might have a wide layout with multiple columns, while on mobile, those same elements should stack vertically — because it’s better for smaller screens.
That’s exactly what breakpoints are for. They control how your design adapts at different screen widths. For example: desktop, tablet, and mobile.
Why Breakpoints Matter
Breakpoints are key for making your website look great on every device.
They let you
Adjust layouts for different screen sizes
Change font sizes or spacing for better readability
Swap images or rearrange sections for mobile users
Remove hover-based interactions on mobile to make your site more accessible
This ensures your site is fully responsive and looks professional — from large desktop monitors to small phone screens.
How Breakpoints Work
When you start a new project your website is designed for desktop by default. With templates there are usually 2 to 3 breakpoints set up.
You can then create or edit breakpoints that automatically activate when the screen width is within a certain range.
The most common breakpoints are
1200 px: Desktop
810 px: Tablet
390 px: Mobile
So for example, if your website is opened in a window smaller than 810 px, Framer will automatically switch to the mobile view.
The desktop breakpoint acts as the parent. Any changes you make to it automatically apply to all smaller breakpoints — unless they are overridden.
Overriding Styles in Breakpoints
When you edit something on other breakpoint than desktop (like tablet or mobile), that change affects only that breakpoint. It overrides the style inherited from the desktop version.
For example, let’s say you replace an image only on the tablet breakpoint. Framer will keep the original image on desktop, but show the new one on tablet.
If you ever want to revert a change, click on the element and look at the right panel — overridden properties appear in blue.
Just click the blue value and select "Reset Override" to reset it and go back to the desktop style.
And that’s how breakpoints work in Framer.
Once you understand which changes apply globally and which ones stay within a specific breakpoint, editing your website becomes so easy and intuitive.
In the next tutorial, we’ll go over how to edit the content on your website.
Details
Adam Sebesta
