Summary - Responsive card

Build a responsive card layout with media queries.

Summary - Responsive card

This group covered the basics of responsive design: setting the viewport with <meta name="viewport">, changing styles by screen width with @media blocks, fluid font sizes with clamp(), and responsive images with max-width.

Now we will put it all together: a card component that stacks on phones and sits side by side on desktops.

Exercise Responsive card: image and heading

Add two declarations: for img add max-width: 100% and height: auto; for h2 add font-size: clamp(1.25rem, 3vw, 1.75rem).

Show example solution

.card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Add responsive declarations for img and h2 */
img {
  max-width: 100%;
  height: auto;
}

h2 {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
}

Responsive design tips

Keep a few things in mind for responsive design in practice:

Write mobile-first: start with phones, then widen with min-width.
Few breakpoints: pick them by content, not by device count.
Use clamp() for text, but still change layout with @media.
Always add max-width: 100% and height: auto to images.

Exercise A complete responsive hero section

Add two things: for .hero h1 add font-size: clamp(2rem, 6vw, 4rem); and inside an @media (min-width: 768px) block add padding: 4rem 2rem for .hero.

Show example solution

.hero {
  padding: 2rem 1rem;
  text-align: center;
}

/* Fluid font for .hero h1, larger padding above 768px */
.hero h1 {
  font-size: clamp(2rem, 6vw, 4rem);
}

@media (min-width: 768px) {
  .hero {
    padding: 4rem 2rem;
  }
}

Test yourself

Which tool for which job?
- Use clamp() for fluid text with bounds
- Use @media (max-width) for fluid font size
- Use clamp() for screen-width breakpoints
- Use img { max-width: 100% } to set the viewport
Show answer

Use clamp() for fluid text with bounds — Correct. clamp(min, vw, max) keeps text fluid within bounds.

Complete the responsive heading declaration

h1 {
  font-size: clamp(1.5rem, ____, 2.5rem);
}

Show answer

h1 {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
}

Next lesson: Mobile-first approach

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies