O'Reilly logo

Responsive Web Design with HTML5 and CSS3 by Ben Frain

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Where fluid grids and media queries come together

If you remember, earlier in the chapter, our navigation links were still spanning multiple lines at certain viewport widths. We can fix this problem with media queries. If our links fall apart at 1060 px and work again at 768 px (where our earlier media query takes over), let's set some additional font styles for the ranges in-between:

@media screen and (min-width: 1001px) and (max-width: 1080px) {
  #navigation ul li a { font-size: 1.4em; }
}
@media screen and (min-width: 805px) and (max-width: 1000px) {
  #navigation ul li a { font-size: 1.25em; }
}
@media screen and (min-width: 769px) and (max-width: 804px) {
  #navigation ul li a { font-size: 1.1em; }
}

As you can see, we're changing the font size ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required