Making Your Website Look Great Across Multiple Devices - CSS3 Foundations - page 272

Adding Media Queries to Cool Shoes & Socks
Now that you know what media features are available, you can modify the layout of Cool Shoes & Socks specific-
ally for mobile devices and then move on to adjusting the tablet experience and desktop experience when the
browser window is narrower than 960px.
Media Queries for Mobile Devices
As you saw in Figure 16-4, Cool Shoes & Socks when viewed on a smaller device gets messy, so let's tidy it up and
make the experience better for smaller devices.
1. At the bottom of styles.css, add the following @media rule:
/* Mobile (portrait and landscape)*/
@media only screen and (max-device-width: 480px) {
}
This rule applies to devices that have a screen width up to 480px—many mobile devices. It's a good idea to in-
clude a comment above the @media rule to remind you and/or your colleagues what exactly a media query
is targeting.
2. Inside the @media rule, add the following declarations:
#header .logo {
display: block;
float: none;
margin: 0 auto;
}
#header {
padding: 0 10px;
}
#header nav, .sidebar, #content{
float: none;
width: 100%;
}
.banner-ad {
display: none;
}
The first two rule sets, #header .logo and #header , center the logo and add padding to either side of
the header.
The third rule set, #header nav, .sidebar, #content , is one you will see a lot for mobile layouts
(the selectors may be different but the declarations the same). Because the desktop version of Cool Shoes &
Socks has multiple columns, when the width of the page is much smaller on devices such as mobile, there
isn't enough room for two columns. When you set the header navigation, sidebar, and content area to
float: none; and width: 100%; , those elements all stretch out into one column, giving them the
space they need to become more readable.
The fourth rule set, .banner-ad , hides the “25% Off” banner, which, as mentioned previously, may get in
the way of content. What's more, fixed position elements don't work well on mobile devices, so it's a good
idea to avoid them where possible.
The mobile layout isn't quite right yet, so add a few more rule sets to the same @media rule.