Media Queries

Displaying device-specific styles

Structure of a Media Query

@media (min-width: 800px) {
  .header {
    background: url(images/background.jpg);
  }
}

On all screens larger than 800 pixels,
make the header background gray.

On big screens, your header should now be an image.

Layout switching

@media (max-width: 800px) {
  .main-menu {
    flex-direction: column;
  }
}

On all screens smaller than 800 pixels,
make the main menu use a column layout.

On small screens, the main menu should be stacked.