11. Style the Event

Use your cheat sheet – and do it right!

Mentor Seraphina

Your task

Style the .date container so that its child elements automatically wrap when space gets tight. Make sure the content remains vertically centered and that there’s a consistent gap between elements.

Ensure that each direct child of .date gets a flexible width – but never becomes too narrow.
Each element should:

  • Be at least 20rem wide
  • But still be able to grow or shrink depending on the available space

Solve the task here in the console [–> Open in a new tab]

CSS
.date {
   gap: var(--spacing-base);
   align-items: center;
   flex-wrap: wrap;
}
.date>div {
   flex: 1 1 20rem;
}
Scroll to Top