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

3. Inside the @media rule and below the other rule sets you just added, add the following:
#header nav > ul {
border: none;
}
#header nav li {
border-radius: 20px;
border: #ccc solid 1px;
margin: 0 0 5px 0;
width: 100%;
}
#header nav ul ul {
display: none;
}
.sidebar {
border-top: 3px dotted #ccc;
clear: both;
margin: 60px 0 0 0;
padding: 20px 0 0 0;
}
.sidebar, .sidebar aside:hover,
.sidebar aside:nth-child(3):hover {
-webkit-transform: none;
-moz-transform: none;
-o-transform: none;
-ms-transform: none;
transform: none;
}
#footer li {
display: block;
float: none;
line-height: 200%;
}
The first rule, #header nav > ul , removes the border around the navigation, and the second rule,
#header nav li , adds borders around each navigation link instead. Because mobile devices often have
touch capabilities now, it is good practice to make sure any link on a page has a wide target area so the users
can easily press it without having to concern themselves about being too accurate.
The third rule set, #header nav ul ul , hides the drop-down menus. It's a good idea to hide complex
drop-down menus on touch devices. Just remember to make sure the top-level pages have links to their
child pages or provide an alternative navigation.
The fourth rule set, .sidebar , changes the layout of the sidebar somewhat. Now that the sidebar sits below
the content (rather than to its side as in the desktop version), it's given a top border to visually separate it
and some margin and padding on top to push it a little further away from the bottom of the content area.
The fifth rule set, .sidebar, .sidebar aside:hover, .sidebar aside:nth-
child(3):hover , overrides the transforms when the sidebar elements are hovered over. Because the
mobile layout is a smaller space, it's better to hide these animated transforms.
The last rule set, #footer li , tidies up the links in the footer.
Finally, modify the product showcase for mobile devices.