HTML and CSS Reference
In-Depth Information
4.
Still inside the
@media
rule and below the other rule sets you just added, add 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%;
}
5.
Save styles.css.
Because the product showcase shrinks a little too small on mobile devices, the first rule set,
.showcase
, increases
its height and also hides any overflowing content, which works well with the changes made in the third rule set.
The second rule set,
.showcase li
, removes the cycling animation from the product showcase. Note that in
Opera Mobile Emulator, the browser doesn't support animations, so the users don't see them anyway. Other
browsers that do support them, such as Safari on the iPhone, don't support the animation particularly well, so that
has been removed from the mobile experience.
The last rule set,
.showcase img
, makes the product images twice as wide (and thus twice as tall). It also over-
writes the inhertied
max-width: 100%;
declaration, because in this case, having the image bigger than its con-
tainer is desired. To keep the product image in the center, you give it a
margin-left
of
-50%
.
With all these styles applied that are specific to mobile devices, the mobile experience is much improved. Figure
16-6 shows how Cool Shoes & Socks looks in Opera Mobile Emulator; the logo is centered, and the navigation is
much more suited to a touch device.
