Expert Tips: Framer Design Breakpoints for Responsive LayoutsExpert Tips: Framer Design Breakpoints for Responsive Layouts
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Framer Devs: What Breakpoints Do You Design For?
I’m curious; when setting up a new project, what breakpoints do you focus on? I typically design for standard desktop, XL desktop, tablet, and mobile, but I know everyone has their own preferences and workflows.
Would love to hear different approaches and any tips for managing responsive designs!
Aleksey's avatar
@Keara Meehan 1440, 1024, 768, 440px And make sure that content looks great at 1920 and 320 px. Perhaps I'm overdesigning it, but I care about user experience so much
Carolyn's avatar
@Keara Meehan I'm baaaasic. I keep it at 1200px, 810px, 390px. 🖥️💻📱 For certain elements I'll let the width full bleed for supersize screens, but text can be hard to parse if it's too spread out so I keep a tight max width around 1200px for most layouts.
Kristine's avatar
@Carolyn Marie @Keara Meehan Same here! Those standard 3 screen sizes 👆 and setting max width where needed so that content remains in check on large screens.
Dylan's avatar
Moving Rectangles logo
@Keara Meehan I've built a system around:
* Parent Layer * Container(90% width and max-width(1536px or 1356px, it depends on what I'm going for) * Section Content
This has worked for me on every project. If I need another breakpoint it'll be for Desktop XL at 1440.
Anslea's avatar
@Keara Meehan 1200px desktop is my gold standard these days and then tablet + mobile.
I stopped adding any higher breakpoints and haven't had an issue, lol. Feels less complicated that way
Keara's avatar
Keara Meehan Design, LLC logo
@Anslea Askew smart! I go back and forth on whether to add on the larger breakpoint!
Anslea's avatar
@Keara Meehan (honestly do whatever you feel is best but also...)
Post image
Vaibhav's avatar
It's the default setting for me. And rarely if there is a major design change for large screens, I add an XL breakpoint.
Rest, your UI, layout, and Framer setup should be such that the website is both adaptive and responsive 🧠
Keara's avatar
Keara Meehan Design, LLC logo
@Vaibhav Khulbe thanks for your insights!!!
Back to feed
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started