Tips & tricks
- Breakpoints
- Sizing
Tips & tricks
- Breakpoints
- Sizing
Tips & tricks
- Breakpoints
- Sizing
What Breakpoint Sizes Should You Use in Framer
Wondering which breakpoints actually matter in Framer? Most people overcomplicate it. Here’s a smarter, simpler way that I like to use to structure my site’s breakpoints.
Posted by
Nandi
Table of contents
My go-to breakpoint setup
This is one of the most common beginner questions I get. Honestly, it’s way simpler than people think.
So let’s clear it up once and for all.
When I’m building Framer websites, I stick to 3–4 breakpoints. That’s it. You don’t need 6 or 7. In fact, adding too many breakpoints is one of the biggest mistakes beginners make. You’ll spend hours tweaking tiny details for every screen size and end up with more chaos than control.
Here’s what I use:
Desktop LG (Large) – 1440px (Optional)
I only add this if I really need more space for visual breathing room. The key thing here: I don’t make any layout changes on this breakpoint. It should look exactly the same as Desktop MD, just stretched out a bit.
Also, make sure that if this LG breakpoint is added, this is the primary breakpoint.
My go-to breakpoint setup
This is one of the most common beginner questions I get. Honestly, it’s way simpler than people think.
So let’s clear it up once and for all.
When I’m building Framer websites, I stick to 3–4 breakpoints. That’s it. You don’t need 6 or 7. In fact, adding too many breakpoints is one of the biggest mistakes beginners make. You’ll spend hours tweaking tiny details for every screen size and end up with more chaos than control.
Here’s what I use:
Desktop LG (Large) – 1440px (Optional)
I only add this if I really need more space for visual breathing room. The key thing here: I don’t make any layout changes on this breakpoint. It should look exactly the same as Desktop MD, just stretched out a bit.
Also, make sure that if this LG breakpoint is added, this is the primary breakpoint.
My go-to breakpoint setup
This is one of the most common beginner questions I get. Honestly, it’s way simpler than people think.
So let’s clear it up once and for all.
When I’m building Framer websites, I stick to 3–4 breakpoints. That’s it. You don’t need 6 or 7. In fact, adding too many breakpoints is one of the biggest mistakes beginners make. You’ll spend hours tweaking tiny details for every screen size and end up with more chaos than control.
Here’s what I use:
Desktop LG (Large) – 1440px (Optional)
I only add this if I really need more space for visual breathing room. The key thing here: I don’t make any layout changes on this breakpoint. It should look exactly the same as Desktop MD, just stretched out a bit.
Also, make sure that if this LG breakpoint is added, this is the primary breakpoint.
Custom desktop LG breakpoint.
Custom desktop LG breakpoint.
Custom desktop LG breakpoint.
Desktop MD (Medium) – 1200px
This is the breakpoint size we see in Framer by default. If the Desktop LG isn’t added to the project, this is the largest, so the primary breakpoint.
Your largest breakpoint should always be the primary.
Desktop MD (Medium) – 1200px
This is the breakpoint size we see in Framer by default. If the Desktop LG isn’t added to the project, this is the largest, so the primary breakpoint.
Your largest breakpoint should always be the primary.
Desktop MD (Medium) – 1200px
This is the breakpoint size we see in Framer by default. If the Desktop LG isn’t added to the project, this is the largest, so the primary breakpoint.
Your largest breakpoint should always be the primary.
Desktop default breakpoint.
Desktop default breakpoint.
Desktop default breakpoint.
Tablet – Default (900px)
Framer’s default tablet size is solid. I usually leave it as-is.
Tablet – Default (900px)
Framer’s default tablet size is solid. I usually leave it as-is.
Tablet – Default (900px)
Framer’s default tablet size is solid. I usually leave it as-is.
Default tablet breakpoint.
Default tablet breakpoint.
Default tablet breakpoint.
Phone – Default (390px)
Again, the default here works great. No need to overthink it.
Why this works
The more breakpoints you add, the more fragile your layout becomes. Every new one is another layer of complexity you’ll have to maintain and test.
By sticking to these 3–4 breakpoints:
You stay focused on the important screen sizes.
You reduce bugs.
You avoid unnecessary design tweaks.
It’s clean, efficient, and it works great in Framer.
Phone – Default (390px)
Again, the default here works great. No need to overthink it.
Why this works
The more breakpoints you add, the more fragile your layout becomes. Every new one is another layer of complexity you’ll have to maintain and test.
By sticking to these 3–4 breakpoints:
You stay focused on the important screen sizes.
You reduce bugs.
You avoid unnecessary design tweaks.
It’s clean, efficient, and it works great in Framer.
Phone – Default (390px)
Again, the default here works great. No need to overthink it.
Why this works
The more breakpoints you add, the more fragile your layout becomes. Every new one is another layer of complexity you’ll have to maintain and test.
By sticking to these 3–4 breakpoints:
You stay focused on the important screen sizes.
You reduce bugs.
You avoid unnecessary design tweaks.
It’s clean, efficient, and it works great in Framer.
