How to Change Primary Breakpoint in Framer

Quick summary

In Framer, the primary breakpoint is always the first breakpoint in your list, and changing it lets you control how your site adapts across screen sizes. This guide walks you through selecting breakpoint presets, applying device-specific styles, and adding new breakpoints to build a fully responsive design.

Steps

1. Open your Framer project to get started.
2. Understand that in Framer, the first breakpoint is treated as the main breakpoint.
3. Open the Breakpoints panel to explore responsive design options and adapt your site for multiple screen sizes.
4. Select the Phone390 preset to optimize your design for smartphone screens.
5. Apply mobile-specific styling that won't affect your desktop design.
6. See how elements automatically reflow to fit the selected screen size.
7. Click the add icon to add a new breakpoint and optimize your design for additional devices.
8. Review how your content adapts seamlessly across all breakpoints.