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.

Perform Framer Template Breakpoints

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.

Making changes on the desktop breakpoint

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.

Making changes on the tablet breakpoint

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.