Studio 6
Responsive design exercises
You will use media queries to make these layouts more usable on smaller screens.
3 column layout
Step 1: Use media queries to make the layout top to bottom on small screens (single column).
Just changing grid-template-columns will not work, due to the explicit column placement for <header>, <footer>, and <main>.
It may be faster to just apply display: block on the <body> but note that this is less flexible: you can't do any intermedia 2 column layout using this technique.
Step 2: Make an intermediate layout with 2 columns on medium width screens.
Layout using grid areas
Grid areas, a different method to place grid items, afford themselves more naturally to a responsive design,
as all you need to do is change the layout specified in the grid-template-areas property.
Prototyping exercise
Instructions given in studio. We'll be prototyping an improvement on the controls described in pages 12-18 of this document.
HW5 Critique & Feedback
- Studio 1
- Studio 2
Solutions
Solutions for responsive CSS exercises are here.