CSS: Media Queries Exercise
The goal of this exercise is to use CSS media queries to make a webpage appeardifferent for printing and for different window sizes.
You may want to consult these slides.
- Start with this webpage,
which already has HTML and CSS for a header, navigation, content, sidebar, and footer. This is what it looks like:
- Add a CSS media query and appropriate styles so that the webpage looks like the screenshot below when printed.
- The header, navigation, and footer should be hidden.
- The sidebar should display under the main content.
Add a CSS media query and appropriate styles so that the webpage looks like the screenshots below when resized to smaller widths. Specifically:
- The sidebar should be hidden.
- The body should have no padding.
- The images shouldn't exceed the width of the window.
- The navigation items should each be on their own line.
- The header should be fixed, so that it stays at the top after scrolling.