Chapter 6: Grid and Media Queries
Now we’re going to look at responsive design and CSS grid. To this point, we’ve built layouts that largely work on desktop only.
Let’s look at how media queries work and the difference between mobile first and desktop first approaches.
We will be looking at slides 25-28 (PDF).
6a: Working with max-width media queries
6b: You Try It
Fork one (or more) of these three pens with the same Galilean Moon collage:
Write a desktop-first layout for this design using media queries. You may have more than one breakpoint if desired.
If you are feeling ambitious, rework the code so that this works as a mobile-first design.