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.
Search WWH ::

Custom Search