BitWithBite
Full-Stack · Quick Reference
Lesson 11 — Responsive Design Cheat Sheet
In one line: Build mobile-first with fluid units, then add media queries at common breakpoints to adjust layout for larger screens.
Common Breakpoints
Mobile
under 600px
Tablet
600–900px
Small desktop
900–1200px
Large desktop
1200px+
Mobile-First Media Query
.cards { display: grid; grid-template-columns: 1fr; }
@media (min-width: 600px) {
.cards { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
.cards { grid-template-columns: 1fr 1fr 1fr; }
}
1Fluid units. %, rem, vw/vh scale better than fixed px.