Building the Portfolio with HTML and CSSLesson 2.4

How to make a portfolio fully responsive with CSS media queries

media queries, breakpoints, mobile-first approach, font scaling, grid column collapse, padding adjustments, min-width vs max-width, clamp function

Responsive Design Is Not Optional

A portfolio that breaks on mobile tells recruiters you do not test your work. Responsive design is table stakes.

Mobile-First Breakpoints

/* Base styles target mobile */
body {
  font-size: 1rem;
  padding: 0 1rem;
}

/* Tablet and above */
@media (min-width: 768px) {
  body {
    padding: 0 2rem;
  }
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop */
@media (min-width: 1200px) {
  body {
    max-width: 1100px;
    margin: 0 auto;
  }
  .projects-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

Fluid Typography With clamp()

h1 {
  font-size: clamp(2rem, 5vw, 4rem);
}

.tagline {
  font-size: clamp(1rem, 2.5vw, 1.5rem);
}

clamp(min, preferred, max) scales font size fluidly between breakpoints without writing separate media query rules for every heading. The preferred value uses vw units so it scales with viewport width automatically.

Always test at 375px, 768px, and 1280px at minimum before committing. Use Chrome DevTools device emulation — switch between viewport widths and check for horizontal overflow, text overflow, and broken flex/grid layouts.