Media queries

  • Depending on factors such as the dimensions of the screen from which a website is accessed, its content may or not be efficiently organized (or even readable).

  • Example using Flexbox:

<div class="flex-container">
  <div></div>
  <div></div>
  <div></div>
</div>
.flex-container {
  display: flex;
  flex-wrap: wrap;

}
.flex-container > div {
  width: 200px;
  aspect-ratio: 3/2;
  background-color: crimson;
}
@media (max-width: 600px) {
  .flex-container > div {
    width: 500px;
  }
}