# How to Change Primary Breakpoint in Framer

> 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.

Canonical: https://livedemo.ai/tutorials/how-to-change-primary-breakpoint-in-framer/
Apps: Framer
Updated: 2026-10-05
Interactive demo: https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a321dab56e05a00fd5a24/preview?step=1

## Steps

1. Open your Framer project.
2. In Framer, the first breakpoint is considered the main breakpoint.
3. Explore responsive design with 'Breakpoints', 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 this screen size.
7. Click on the add icon to add a new breakpoint to optimize your design for different devices.
8. Examine how your content adapts seamlessly across all breakpoints.