We'll need to edit the two media queries for the two smallest screen sizes.
@media (min-width: 480px) and (max-width: 800px)
—add the following code. Again, you'll find you can add it to your existing declarations.header{ height: 100px; background-position: 0 -220px; } #mainNav{ top:100px; } #mainNav li{ background: url(images/pngs/highlight-border.png) repeat-x 0 bottom; } #container2{ background-position: 70% -90px; }
@media only screen and (min-width: 320px) and (max-width: 480px)
—add the following code:header{ height: 70px; background-position: 0 -425px; } #mainNav{ top:70px; } #mainNav li{ background: url(images/pngs/highlight-border.png) repeat-x 0 bottom; } #mainNav li a{ padding: 10px }
We loaded our graphics into our STANDARD STYLING
rules and then moved on to each media query, modifying the height
, background-position
and other visual properties as needed along the way. Most notably, we changed our header height and, using the CSS sprite technique, our logo loaded up with the different sized logo as our screen dimension changed.
Our final desktop layout now looks like the following screenshot:
Our final portrait tablet layout now looks like this: