Skip to content

What are good CSS Breakpoint values for Responsive Design?

New Course Coming Soon:

Get Really Good at Git

The optimal CSS breakpoint values I use in my projects

While designing a site, I noticed I was using some pretty random values for my CSS breakpoints. Sometimes a rounded value like 800 or 1200, sometimes a specific value up to the pixel like 672.

I searched for the proper values to apply to my breakpoints going forward.

I had a little bit of time to look this up, and I came to this conclusion.

We have 5 major device sizes to worry about:

Those devices map to those pixel values:

I took those values from the Tailwind defaults.

I am not a designer, so I’m not involved daily in the best practices, but I decided this time to design mobile first.

Which means my CSS, without any media query, is going to design for the mobile portrait use case, and then adding breakpoints I’ll design for devices that are bigger and bigger, banning the max-width from media queries.

I think I always went for the opposite route: design for bigger screens, which is what I use the most, and then go smaller, but designing mobile-first and using min-width seems the most accepted and used solution nowadays.

These are the media queries I will use from now on:

@media (min-width: 640px) {

}

@media (min-width: 768px) {

}

@media (min-width: 1024px) {

}

@media (min-width: 1280px) {

}
Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. A course that helps you feel less frustrated with Git. Launching May 21, 2024. Join the waiting list!
→ Get my CSS Handbook
→ Read my CSS Tutorial on The Valley of Code

Here is how can I help you: