Media Queries

Media queries can apply CSS based on screen size.
They can not modify HTML.

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.

Good cases for media queries

• Horizontal menu becomes stacked on mobile
• Plain background on mobile, photo on desktop
• Grid layout becomes column on mobile
• Sidebar hidden on mobile

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.

What we learned

• Media query structure
• Min width and max width settings