How to Change Primary Breakpoint in Framer
- George Apostolov
How to Change Primary Breakpoint in Framer: step-by-step guide
Open your Framer project.
In Framer, the first breakpoint is considered the main breakpoint.
Explore responsive design with 'Breakpoints', and adapt your site for multiple screen sizes.
Select the 'Phone390' preset to optimize your design for smartphone screens.
Apply mobile-specific styling that won't affect your desktop design.
See how elements automatically reflow to fit this screen size.
Click on the add icon to add a new breakpoint to optimize your design for different devices.
Examine how your content adapts seamlessly across all breakpoints.
Quick answer: To change the primary breakpoint in Framer, open your project where the first breakpoint is the main one. Explore responsive design with Breakpoints, select the Phone390 preset for smartphone screens, apply mobile-specific styling without affecting desktop design, watch elements reflow, and click the add icon for new breakpoints.
About this Framer tutorial
Optimize your Framer project for multiple screen sizes by setting primary breakpoints, applying mobile styling, and adapting content seamlessly. This guide shows how to change Primary Breakpoint in Framer in 8 steps, starting with "Open your Framer project" and finishing with "Examine how your content adapts seamlessly across all breakpoints". The interactive demo above is a click-through copy of the real Framer interface, so you can rehearse each step before doing it in your own account.
Frequently asked questions
How many steps does it take to change Primary Breakpoint in Framer?
8 steps. Each one is listed in order above, and the demo highlights exactly where to click.
Can I try it without changing my own account?
Yes. Clicking through the demo doesn't touch your Framer data or settings. Once you know the flow, repeat it in your own workspace.
This tutorial is filed under Framer. Related guides: How to Connect Domain to Framer, How to Connect GoDaddy Domain to Framer and How to Connect Pages in Framer. Last reviewed 05 Oct 2026.
Create your first interactive demo in minutes
No credit card required • Start building today
