Responsive Design

Responsive design ensures your website looks great on every screen — mobile, tablet, and desktop. The primary tool is CSS media queries.

/* ── Mobile-first approach ───────────────────────────────
   Write base styles for mobile, then ADD styles for larger screens.
   This is more efficient than desktop-first (overriding down). */

/* Base — mobile (single column) */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 16px;
}

/* Tablet (768px and up) */
@media (min-width: 768px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
    padding: 24px;
  }
}

/* Desktop (1024px and up) */
@media (min-width: 1024px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
    padding: 40px;
  }
}

/* Large screens (1280px+) */
@media (min-width: 1280px) {
  .section-container {
    max-width: 1200px;
    margin: 0 auto;
  }
}

Relative units for fluid layouts:

.container {
  width: 90%;          /* 90% of parent */
  max-width: 1200px;   /* never wider than 1200px */
  font-size: 1rem;     /* 16px (based on root font size) */
  padding: 1.5em;      /* relative to element's font-size */
  height: 100vh;       /* full viewport height */
  width: 100vw;        /* full viewport width */
}

Responsive design checklist:

• Add <meta name="viewport"> to every HTML file
• Use rem/em/% instead of fixed px for font sizes and spacing
• Design mobile-first using min-width breakpoints
• Use max-width on containers to prevent overly wide content
• Use flex-wrap or grid auto-fill for component layouts
• Test in browser DevTools with device simulation (F12 → device toolbar)