Project 19: Profile Settings Card

CSS Stylist

Builds on these lessons

Modern Container Queries Layouts Subgrid Layouts Masonry

Step 1 of 2

Project

Container Queries

Give .settings-card container-type: inline-size, then @container (min-width: 400px) { .settings-row { flex-direction: row; } }. A media query responds to the VIEWPORT; a container query responds to the CARD'S OWN width — so this same card lays out correctly whether it's alone on a page or squeezed into a narrow sidebar.

🎯 Your Task

Please add the exact code shown in the light gray box below to your editor.Do not delete your previous code, just insert these new lines in the correct place!

.settings-card {
  container-type: inline-size;
}

.settings-row {
  display: flex;
  flex-direction: column;
}

@container (min-width: 400px) {
  .settings-row {
    flex-direction: row;
  }
}

← Previous Next →