Responsive CSS

Learning checklist

Ingredients of responsive design

fluid display
- using relative units (e.g. %, fr) rather than static units (e.g. px)
media queries (@media)
- media types
  - screen
  - all
  - print
  - speech
- media features (a.k.a. breakpoints)
  - @media (max-width: 12450px) { ... }
  - @media (min-width: 300px) and (max-width: 12450px) and (orientation: landscape) { ... }
thinking in containers (don't micromanage every single html element!)
mobile-first approach

Let's look at an example where the media query helps to change the layout of a website when browser window size changes.

To start with, here is the template

Now let's apply the media query and re-size the browser window:

@media all and (max-width: 400px) {
  .sidebar-left, .sidebar-right, .article {
    grid-column: 1 / 4;
    background: gold
  }
}

What did you observe when the windows's width is less than 400 pixels?

Make your previous CSS Grid assignment mobile-responsive for the following: