CSS: Media Queries Exercise

The goal of this exercise is to use CSS media queries to make a webpage appear different for printing and for different window sizes.

• 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. Specifically:
  • 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.

  240x320: small phone

  

  320x470 Android normal

  
  
  
  

Show Solution