Responsive Layout

Instructions:

The media queries are already set, so you do not have to write them from scratch, and can focus on styling the different layouts.

1. Give each media query a different color background so you can see it change.

   Target .main-column with different color backgrounds in each media query. Test to see that the colors change. If they do, you know it is working.

2. Much of the work is done by section with the id responsive. You can target either the id or the section. Which you target can make a difference. See below.

   This is where the width is set for the container that determines all of the other elements.

   The default layout is for old browsers that do not recognize media queries. They ignore the styles inside of the media queries. You will see that the media queries cover over this style, except for 20 pixels, between 320px and 340px. This is just for fun, so you can see the default layout.

   Start out by defining the rules for the section that will be the default width: 960px; margin: 0 auto; to center the box.

   Set the background color and overflow to auto if you want a background color extend behind the floated children.

   Give the default layout a font size.

   Now target the section with each media query, and set it to the same width as the @meida Query.

   It is easiest to do one and then copy it to the other media queries.

3. To make the text easier to read, put 10px padding on the section: scratch that. Put the padding instead on the paragraphs and the list items. That way, you will not compromise your calculations when you create columns, which would subtract the padding from the content area.

   In the default document, add padding to right and left of both paragraphs and list items: p, li {padding: 0 10px;}

4. Set columns divs inside of the section or the id responsive to float left: #responsive div {float: left}. Note that you want columns only some of the time.

   Color the background of the two side columns silver in the default css.

   Notice that there is a difference when you specify #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. Very interesting. This shows off the power of an ID over a class.

5. resize each column (.right-column and .left-column and .center-column) so that each can 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;}

6. 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.

7. Set viewport and zoom

   The following needs to go into the header or else the iphone will not play along:

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

8. Default layout targets smallest device: 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.