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

Media queries—only part of the solution

Oh… best put that ice back in the freezer. Clearly our work is far from over; that looks horrible on the smaller 320 pixel wide viewport of our iPhone. Our media query is doing exactly what it should, applying styles dependent upon the features of our device. The problem is however, that the media query covers a very narrow spectrum of viewports. Anything with a viewport under 768 pixels is going to experience clipping and anything between 768 and 960 pixels will experience clipping as it will get the non-media query version of the CSS styles which, as we already know, doesn't adapt once we take it below 960 pixels wide (your author rests his head in his hands and lets out a long sigh).

We need a fluid layout ...

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