Vertical Media Queries for Above the Fold Content

What the heck is a vertical media query?
We’ve all used media queries that look something like this:
[css]@media screen and (max-width: 25em) {}[/css]
A vertical media query targets height instead of width:
[css]@media screen and (max-height: 15em) {}[/css]
Why would you do that?

One reason is to keep above the fold content above the fold, even when the browser or device is very small. For example, if you have a call to action, or some other element that absolutely needs to be above the fold at all times.

Example

Let’s look at an example: http://cdpn.io/eAhFq (make the browser shorter/taller to see the media queries take effect)
I am using the vertical media queries to decrease padding and font-size, and even hide and reposition elements as the window gets shorter. This allows the call to action buttons to remain in view, even at a very short window height.

The Code

The first media query is at 20em (why ems?), and I’m decreasing the padding to keep all the important stuff in view:
[css]@media screen and (max-height: 20em) {
.hero {
padding: .7em;
}
}[/css]
After that, I’m progressively adding small tweaks:
[css]@media screen and (max-height: 15em) {
.hero {
font-size: smaller;
}
}
@media screen and (max-height: 13em) {
.hero p, .hero .fake-image {
display: none;
}
}
@media screen and (max-height: 8em) {
.hero h1 {
float: left;
margin-right: 2em;
}
}[/css]
Here’s the full demo code:

See the Pen Vertical Media Queries by Scott Bolinger (@scottb) on CodePen

This is just one example, I know you smart guys and gals will come up with cool ways to use vertical media queries. If you do, feel free to leave them in the comments!
Further Reading:
http://trentwalton.com/2012/01/11/vertical-media-queries-wide-sites/
http://css-tricks.com/responsive-web-above-the-fold/