Resolution range, not breakpoints

Was working on a system for our breakpoints and was just not happy with how things had been. It never seemed to make sense but I couldn't articulate why.

Then I stumbled upon this blog post by David Gilbertson - https://medium.com/free-code-camp/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862

The main concept he hits home with is the idea of screen resolution ranges. That was what I was missing. It never made sense to have a breakpoint at 320px for mobile because then at 321px we see the tablet version?

He's got some great illustrations as well. Even though the article is 8 years old, don't let that scare you away. You can find some updated numbers on popular screen sizes, but the principles are going to work for any application.