Adaptability Revolution

Media queries (@media) monitor entire screen size. But what if the same product card should look different in a narrow sidebar and in the wide page center?

Container Queries

They allow element to change style depending on DIRECT PARENT size, not entire screen.

/* 1. Tell parent to monitor its sizes */
.parent {
  container-type: inline-size;
}

/* 2. Configure child element */
@container (width > 400px) {
  .card {
     display: flex; /* If parent is wider than 400px, card becomes horizontal */
  }
}