The Virtues of Vertical Media Queries

by Jeffrey Zeldman

2 Reader Comments

Back to the Post
  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: http://coyote.byjoby.com/

    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.

    Copy & paste the code below to embed this comment.
  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: http://css-tricks.com/responsive-web-above-the-fold)

    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!

    Copy & paste the code below to embed this comment.