Media Queries

Media Queries are the basic tool for controlling resizing of elements based on screen size. The is the backbone of responsive design.

When the size of the browser window is <=600, the color of the element will change.

💡

You will need to resize the browser window to show the effect of the @media rule.

@media (max-width: 600px) {
   .item1 {
      background-color: var(--color-decorative-300);
   }
}