Getting Fancy - Jump Start CSS - page 164

Without this tag, the website will appear at normal width, but scaled down to fit the screen.
This might not be desirable, so include this tag to ensure the media queries are working as
expected. For a full explanation of the viewport meta tag, see the Mozilla developer site.
As mentioned, since this is not a full discussion of RWD, we don't have the space to describe
in detail all the layout changes we'll be making inside our media queries, but here is a run-
down of what we'll do for each:
At 930 pixels
• Center the logo and drop the main navigation links below the logo.
• Disable the logo animation.
• Change the two-column layout in the main content area to a single column,
dropping the sidebar below the “Latest Recipes” section.
• Change the width of each of the two columns to fill the available space (using
width: auto) and remove the background on the left column.
• Change the 3-column footer to be a single column, again changing the three in-
dividual footer sections to width: auto.
• Change some margin, padding, positioning, and font values for various ele-
ments.
• Add a text shadow to the promo text so it's more readable when overlaying a
light-colored promo image like the one we're using.
At 730 pixels
• Shrink the height of the promo image and realign the promo text and button.
• Add a border below each .media element to clearly delineate each entry in the
“Latest Recipes” section.
At 480 pixels
• Change the padding on the main navigation items.