i wanna know if i'm doing css responsive wrong
this number scares me a bit; like i only have like 7 breakpoints, from 1920 to 1280 so far,
i'm not planning to do tablet i'll jump right through mobile [430 => 360]
the whole css file will end up being 3000 ish lines
what's your rule for responsive design, for me i just toggle inspection push the x boundaries smaller till the design breaks
5 Replies
You don’t need that many breakpoints. Take a look at flex wrap for flexbox, auto-fit/auto-fill along with minmax for grid and min/max/clamp. If you utilise those correctly you most likely wouldn’t need many breakpoints, depending on the design of course.
Only seven breakpoints is wild 😆 can you link a codepen ? I can damn near guarantee that whatever layout you’re working on could be achieved responsively with 0-2 breakpoints
if you have that many breakpoints, you're doing something very wrong and is a symptom of a brittle layout
I would use maximum 4 breakpoints, sometimes none. This would depend on the content.
For a article type text, this could be without any breakpoints at all.
For a grid I would use 3 typically. (1-2 column on mobile, 2-3 on tablet and 4-5 on desktop).
For a over-the-fold more custom design I could add in a XL screen breakpoint on top of the three for the grid. But it depends a bit on how I worked with the content. If I use SVGs and are a bit cleaver from the start I might get away with less.
you can just make the grid items wrap by using auto-fit. an example is
grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr))