Responsive Layout

Instructions:

1. Create additional media queries for 1000px, 800px, 480px and 320px.
2. Target .main-column with a different color background for each media query. Test to see that the colors change. If they do, you know media queries are working.
3. Much of the work is done by section with the id responsive. You can target either the id or the section. How you target the element can make a difference. See below. The section with the container id determines all of the other elements.
4. The default for section are: width: 1200px; margin: 0 auto; to center the box.
   Set the background color and overflow to auto if you want a background color extend behind floated children.
   Give the default layout body tag a font size.
   Target the section in each media quer and set it the same width as the @meida Query.
5. To make the text easier to read, put 10px padding on the paragraph and list items. Add padding to right and left of both paragraphs and list items: p, li {padding: 0 10px;}
6. Set columns divs inside of the section or the id responsive to float left: #responsive div {float: left}.
7. Color the background of the two side columns silver in the default css. There is a difference if you specified #responsive div or section div. The ID trumps the class, and overrides the color given to the .main-column, while the section div does not. The power of an ID over selecting elements directly.
8. resize each column (.right-column and .left-column and .center-column) so that they fit into the new size determined by the #responsive or section definition — if that is what you want.
   For an iphone, you do not want 3 columns, so you do not specify any width. For wide screens, you can specify the width, so you get 3 columns.
   You can mix and match, putting left and center columns together but putting the right column after.
   The left and right columns are set together, like .left-column, .right-column {} and .main-column {background: assign different colors;}
9. The menu is easy enough to manipulate, as you have done this before.
   Give the nav a {} basic styling, such as red background, no text decoration, color, padding, height, border-bottom, etc.
   The nav a:hover {} needs a different background color, like green.
   remove padding and margins of the unordered list for iphone and tablet, but add in some padding and margins for the larger viewports.
   Give the nav ul li {} inline block display to satisfy the default requirement, but in the small media queries, turn it to block. Turn it back to inline-block in the tablet media query to make it inline again.
   Make the nav pop out in the last media query by positioning it absolutely, and using negative left margins, manipulate it without the need of its parent to have relative positioning.
   That should tell you something about the nature of absolute positioning: it only resets itself to the zero point of the parent when explicitly moved, otherwise it stays locked in with the document flow.
10. Set viewport and zoom: The following is already in the header or else the iphone will treat the website as a 960 wide website:

    <meta name="viewport" 
    content="width=device-width">

11. The default layout could also target small devices first: iphone (320px by 480px) (640px by 960px retina display) Because there are many devices, some people do not target device but a general range, like 22em, 35em and 54em. You can choose your own breakpoints. For an interesting look at placing breakpoints, article by Vasilis van Gemert.