HTML & CSS · Quick Reference

Lesson 9 — Responsive Design Cheat Sheet

HTML & CSS

In one line: The mobile-first approach means you write your base CSS for small screens first, then use media queries to add styles for larger screens. This is the opposite of the old "deskto...

Key Ideas

1Mobile-First Thinking. The mobile-first approach means you write your base CSS for small screens first, then use media queries to add styles for larger screens. This is the opposite of the o...

2Media Queries. A media query applies CSS only when certain conditions are true — like screen width, orientation, or display type. The syntax is @media (condition) { ... }. You'll mos...

3Fluid Typography with clamp(). Instead of setting a font size at every breakpoint, clamp() lets you define a minimum, preferred, and maximum value in one declaration. The browser smoothly scales the...

4Responsive Images & Viewport Units. Images that overflow their container are the most common responsive bug. The fix is simple. Viewport units (vw, vh, vmin, vmax) let you size elements relative to the s...

Code Examples

/* ✅ Mobile-first (recommended) */
.card {
  display: block;         /* single column on mobile */
  padding: 1rem;
}

@media (min-width: 768px) {
  .card { display: flex; } /* side-by-side on tablet+ */
}

/* ❌ Desktop-first (avoid) */
.card {
...

/* Base styles — mobile (no query needed) */
.container { padding: 1rem; }

/* Small tablet — 480px and up */
@media (min-width: 480px) {
  .container { padding: 1.5rem; }
}

/* Tablet — 768px and up */
@media (min-width: 768px) {
  .container { p...

/* Orientation */
@media (orientation: landscape) { ... }
@media (orientation: portrait)  { ... }

/* Combining with AND */
@media (min-width: 768px) and (max-width: 1023px) {
  /* tablet ONLY */
}

/* Hover capability (touch vs mouse) */
@media (...