How to Change Primary Breakpoint in Framer

‍

‍

Here’s how to do it:

‍

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.