The A List Apart Blog Presents:

The Virtues of Vertical Media Queries

Article Continues Below

Devices come in all shapes and sizes, and pivot between portrait and landscape orientation, often in a single session. And, lest we forget, desktop and laptop browsers can also be contorted into all sorts of shapes (and not just by web geeks trying to see if a site is responsive). Just as we had to stop ignoring skinny viewports, it’s time to stop ignoring short (and tall!) ones and start employing them to creative and user-pleasing effect.

Strangely enough, the only prominent example of a creative use of vertical media queries comes from a company that, while known for its design leadership in other areas, has made rather a point of ignoring responsive design. (I won’t name them here, but they make iPhones, iPads, and MacBooks.) Happy Cog’s Anthony Colangelo deconstructs the Cupertino-based company’s vertically responsive page, makes a compelling case for vertical media queries generally, and even shares vanilla and Sass CSS samples showing how it’s done in yesterday’s brief yet pungent Cognition article, Go Vertical.

2 Reader Comments

  1. I used a vertical media query all by itself recently, actually. I’m redesigning my personal site, and I used a set of vertical media queries to make sure that the carousel on the homepage (almost) always fits:

    That home page has the distinction of using both horizontal and vertical media queries, which operate independently of each other. The sub-pages of the site are also noteworthy in that they mix px- and em-based media queries as is appropriate for different page elements.

    I’m rather proud of it, even if I haven’t cobbled in support for IE7-8 yet.

  2. I’ve been finding vertical media queries super handy for logic that will allow for a fixed sidebar or header (I wrote about it for CSS Tricks here:

    A warning: combining complex horizontal and vertical media queries can make things really confusing if you don’t stay super organized!

    So far my vertical responsive styles have always been one breakpoint (literally tall screens get something fixed). Even this doubles the responsive testing one has to do! I hate to think about doing QA on a layout that has several breakpoints on each axis!

Got something to say?

We have turned off comments, but you can see what folks had to say before we did so.

More from ALA

Designing for the Unexpected

As devices continue to diversify in dizzying ways, how can we make sure our work on the web stays as relevant as ever for the long haul? Cathy Dutton shares how practitioners must perfect designs both for the paradigms of the present and the twists of the future, come what may.

Asynchronous Design Critique: Getting Feedback

Receiving feedback can be a stressful experience: will an open-ended question attract helpful guidance or harsh criticism? Erin “Folletto“ Casali coaches us through a process to ensure that feedback always lands gracefully.

Asynchronous Design Critique: Giving Feedback

You’ve heard the term “constructive criticism” countless times but do you know how to deliver it? Part one of this series from Erin ‘Folletto’ Casali gives you a framework for it! Flex your feedback muscles and practice these skills to empower and inspire others without deflating or confusing them.

That’s Not My Burnout

If, like many folks during the pandemic, you’ve begun confusing burnout for achievement, Donna Bungard will show you how to recognize that you’re low on fuel and give you a map of rest stops where you can refill your tank.