Go Vertical

Not only are there countless physical screen sizes, but each handheld device can be held in portrait or landscape orientation—and browsers on a desktop or laptop can be contorted into all sorts of shapes.

So, why has responsive design focused almost exclusively on viewport width? Just like we had to stop ignoring skinny viewports, we need to stop ignoring short (and tall!) ones.

When Things Get Weird

Long and skinny viewports, like an iPhone in portrait orientation, are a natural fit for websites. Their width is perfect for single-column layouts, and their height works well for seeing a whole block of content at once. Turn that sideways, and things get a little weird.

Images often don’t fit in the viewport. Scrolling, awkward zooming, and 11-finger gestures are required to see the whole picture. Large headings and generous line-height can severely limit the amount of text visible on screen at a time, making reading a chore.

Scrolling past a 400-pixel-high Google Map on a 320-pixel-high touch screen is like playing Operation (without the horribly traumatizing buzzer).

In all of these cases, a simple vertical media query would make a world of difference.

In The Wild

The most widely known (whether noticed or not) example of vertical media queries comes from a company I wouldn’t have expected to come up in a conversation about responsive design: Apple. With the company’s device line-up, it’s surprising that Apple really hasn’t even acknowledged responsive design. Yet, Apple is one of few using vertical media queries in a meaningful way.

On the iPhone’s landing page, Apple uses vertical media queries to increase the size of the hero image as the viewport’s height grows. Start your browser at approximately 650 pixels high, and look at the hero image.

In typical Apple style, it’s front-and-center—essentially the only thing on the page. Begin making your viewport a bit taller, and you’ll notice that at 721 pixels, the image size bumps up to regain that center stage focus. Same thing happens again at 1,001 pixels.

When space is available, why not feature the product more prominently? Apple uses vertical media queries to optimize its iPhone hero image for tall viewports but could easily extend that same thinking to small viewports, as well.

Using Vertical Media Queries

To be honest, I have yet to use a vertical media query all by itself. Not to say I never will, but I haven’t run into a use case for that yet. I typically use vertical media queries combined with their horizontal siblings to make minor adjustments and optimizations to an existing layout.

In vanilla CSS, that looks like this:

@media (min-width: 32em) {
 h2 {
 font-size: 2em;
 line-height: 1.5;
 }
} 
@media (min-width: 32em) and (max-height: 20em) {
 h2 { line-height: 1; }
}

I’ll normally have a base style in my main layout query (the min-width declaration above) and will combine that with a vertical query to make adjustments for a particular size.

For my fellow Sass users out there, the above code would look like this:

h2 {
 @media (min-width: 32em) {
 font-size: 2em;
 line-height: 1.5;
 @media (max-height: 20em) { line-height: 1; }
 }
}

Like any approach to our work, you’ll have to experiment with vertical media queries to figure out how (or if) you like using them. I’m sure there are some amazing (and far more complex) examples of vertical media queries out there. For all I know, someone has created a vertically-responsive site that turns into a side-scrolling platformer game (like Super Mario Bros.) at heights less than 100 pixels.

Have you used vertical media queries in your projects? Please share! We need more examples of how to better serve viewports of all heights.

Back to Top