CSS

Lesson 05

Responsive units

Use responsive ranges that respect readable text and container context.

Good Code

lesson-card.css
.lesson-card {
  /* Bounded values scale with the component without losing readability. */
  container-type: inline-size;
  padding: clamp(1rem, 2cqi, 1.5rem);
  max-width: 42rem;
}

.lesson-card__title {
  font-size: clamp(1.25rem, 1rem + 1vw, 2rem);
  line-height: 1.2;
}

.lesson-card__body {
  font-size: 1rem;
  line-height: 1.6;
}

Bad Code

lesson-card.css
body {
  /* Viewport text size can become unreadable outside this exact screen width. */
  font-size: 1.2vw;
}

.lesson-card {
  padding: 4vw;
}

.lesson-card__title {
  font-size: 4vw;
}

Review Notes

What to review

Good Code

The good version uses clamp() to set responsive bounds and keeps body text at a readable base size.

Bad Code

The bad version renders responsively, but viewport-scaled body text can become tiny on narrow layouts or oversized on wide screens regardless of the content container.

Takeaways

  • Use bounded responsive values so scaling cannot make text too small or too large.