Your Framer template is designed to look great on all screen sizes — desktop, tablet, and mobile. This is achieved through breakpoints, which let you define different layouts for different screen widths.

What Are Breakpoints?

A breakpoint is a specific screen width at which the layout changes. For example, a 3-column grid on desktop might become a 1-column list on mobile. Framer lets you define these transitions visually without writing any code.

Switching Between Breakpoints

1. Look at the top of the Framer canvas. You'll see icons for different screen sizes (desktop, tablet, mobile).

2. Click each icon to switch to that breakpoint's canvas view.

3. Changes you make at a specific breakpoint only affect that breakpoint — your desktop layout stays intact when you edit mobile.

⚠️ Note: Your template already has breakpoints configured. You mostly only need to adjust them if you're adding new sections or significantly changing layouts.

Common Responsive Adjustments

• Column count — Change from 3 columns to 1 column at mobile breakpoint.

• Stack direction — A horizontal stack (row) often becomes vertical on mobile.

• Font sizes — Headings may be smaller on mobile. Adjust the text size at the mobile breakpoint.

• Padding — Sections typically have less horizontal padding on mobile to maximize content width.

💡 Tip: Always preview your changes on mobile before publishing. Click the Preview button and resize the preview window, or use your browser's developer tools to simulate a mobile screen.