HTML and CSS Reference
In-Depth Information
-o-animation: none;
animation: none;
}
.showcase img {
height: auto;
margin-left: -50%;
max-width: 200%;
width: 200%;
}
}
7. Save styles.css.
When you move the showcase rule sets out of the @media rule that applies to mobile devices and viewports
up to a width of 735px, the slideshow begins animating again in desktop browsers (where browsers support
CSS3 animations). To keep it from working on mobile devices, you then add an @media rule specific to
mobile again.
With the desktop experience below a viewport width of 735px now taking on the mobile layout, the newsletter
box looks a little stretched, as shown in Figure 16-12, so you can change that.
8. At the bottom of styles.css, add the following:
/* viewport between 480px and 735px */
@media only screen and (min-width: 480px) and (max-width: 735px) {
#newsletter {
margin: 0 auto;
width: 50%;
}
}
This rule causes the newsletter box to be 50% wide when the viewport is between a width of 480px and 735px.
Search WWH ::




Custom Search