HTML and CSS Reference
In-Depth Information
FIGURE 8.9
The third, narrower layout is
potentially good for a tablet in portrait mode
or a small-resolution desktop monitor.
The next media query simply reduces the font size and spacing of the naviga-
tion menus to make them fit better at slightly smaller widths:
@media all and (max-width: 870px) {
v {
: ;
}
nav li a {
: ;
}
}
The third media query performs a number of tasks but basically narrows down
the Related Reels sidebar to a single column and alters the layout of the Video
Reel section.
@media all and (max-width: 800px) {
.
}
Figure 8.9
shows the result.
