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

but because the content area starts to get too squashed as this point, a better approach would be to adopt a
similar layout to the mobile layout.
Rather than write another @media rule and lots more styles, adapt the @media rule that was written for mo-
bile devices.
3. In styles.css, find the following @media rule:
/* Mobile (portrait and landscape)*/
@media only screen and (max-device-width: 480px)
4. Change that @media rule and the comment that describes its purpose to the following:
/* Mobile (portrait and landscape) and viewports up to
a 735px width */
@media only screen and (max-width: 735px) {
When you change the last query to max-width: 735px , the mobile layout applies to mobile devices and
viewports equal to or below a width of 735px . Although it was determined that the breakpoint of the nav-
igation was at 710px , the navigation got a bit too close to the logo, so it's been increased to 735px .
The mobile layout disabled the animation on the product showcase, which is undesired, so make another @me-
dia rule specific to mobile devices only and move the showcase rule sets into that.
5. From the @media rule @media only screen and (max-width: 735px) , remove the following:
.showcase {
height: 200px;
overflow: hidden;
}
.showcase li {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
-o-animation: none;
animation: none;
}
.showcase img {
height: auto;
margin-left: -50%;
max-width: 200%;
width: 200%;
}
6. Above @media only screen and (max-width: 735px) , add the following:
/* Mobile (portrait and landscape) */
@media only screen and (max-device-width: 480px) {
.showcase {
height: 200px;
overflow: hidden;
}
.showcase li {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;