Small Screens

One stylesheet serves every window, from a phone to a wide screen. A media query is a block of rules that count only while its condition is true: @media (max-width: 600px) { … } counts while the window is 600 px wide or less, and is skipped on wider windows.

Inside the block you write ordinary rules. They add no strength: when a rule in the block and a rule above it have the same selector and set the same property, the later one wins. That is why the block goes at the end of the file. For example, a smaller heading on phones:

@media (max-width: 600px) {
  h1 {
    font-size: 24px;
  }
}

The check opens the page 1024 px wide and prints the style of .products and .side-note. Then it makes the window 500 px wide and prints them again. display: none takes the side note off the screen, so the check prints its lines leaving, marked -. Your stylesheet must give:

> the style of .products (1 element, window 1024 px wide)
  ul.products "Mug $12 Buy Notebook Out of st"
    grid-template-columns: repeat(3, 1fr)   <- .products
> the style of .side-note (1 element, window 1024 px wide)
  aside.side-note "Free delivery on orders over $"
    display: (not set)
> make the window 500 px wide
  screen changes:
      main
    -   aside
    -     text: Free delivery on orders over $30.
> the style of .products (1 element, window 500 px wide)
  ul.products "Mug $12 Buy Notebook Out of st"
    grid-template-columns: 1fr   <- .products
> the style of .side-note (1 element, window 500 px wide)
  aside.side-note "Free delivery on orders over $"
    display: none   <- .side-note

The check can't see whether one column fits a phone well: look at the page yourself.

Your task: at the end of the file, write a @media (max-width: 600px) block with two rules: .products gets grid-template-columns: 1fr, and .side-note gets display: none.

Assignment
Follow the Coding Tutorial to write a media query that gives small windows one column of products and hides the side note.

Hint
Each rule inside the block has its own braces, inside the block's braces. The block's closing } comes after the .side-note rule.