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).
Using media queries alone to change a design is fine if we have a specific known target device; we've already seen how easy it is to adapt a device to the iPad. But this strategy has severe shortcomings; namely, it isn't really future-proof. At present, when we resize our viewport, the design snaps at the points that the media queries intervene and the shape of our layout changes. However, it then remains static until the next viewport "break point" is reached. We need something better than this. Writing CSS styles specific to each and every viewport permutation doesn't make allowances for future devices and a really great design is one with some degree of future proofing built in. At this point our solution is incomplete. This is more of an adaptive design rather than the truly responsive one we want. We need our design to flex before it snaps. To make that happen we need to move from a rigid and fixed layout to a fluid layout.