Hit 100 lines of CSS without any media queries and I'm a believer now

I always thought responsive design meant you had to have breakpoints everywhere. Then I tried building a simple card layout with grid and flexbox only, no media queries at all. After 100 lines it just worked on my phone, tablet, and laptop. The part that got me was when I resized the browser down to a tiny window and the cards just stacked automatically. Has anyone else tried going query-free on a real project?

2 comments

2 Comments

black.margaret11d ago

The tricky part nobody talks about is content order on mobile. That card layout might stack fine, but what if you have a sidebar that needs to come first on small screens? I tried this on a product page and ended up using a couple of order resets in flexbox to keep the flow right. It worked but took more planning than just slapping a breakpoint in.

hugo5011d ago

Read somewhere that accessing content order in mobile first design saved them from a lot of headaches later.