5 Uses for Vertical Media Queries

Media queries are the core technology behind Responsive Web Design yet, despite a plethora of options, few of us dare venture beyond min-width (and possibly max-width), i.e.

/* mobile-first layout */
.column {
	width: 100%;
}

/* tablet layout */
@media (min-width: 50em) {
	.column {
		float: left;
		width: 50%;
	}
}

/* desktop layout */
@media (min-width: 75em) {
	.column {
		width: 33.33%;
	}
}

Few other media query properties are required for general use:

  • width, height and the device declarations are a little too exacting
  • resolution can be used for high-density Retina screens but the new HTML5 picture element and srcset attribute are more appropriate for image content
  • color and monochrome properties may only be useful when targeting e-readers
  • aural, braille, handheld, projection, tv, scan, grid etc. have specific device use cases
  • aspect-ratio and orientation may only be needed when screens fall outside the standard 4:3 and 16:9 range

View the media query reference on MDN.

However, should we show more love for the min-height and max-height properties? If we only consider min-width and/or max-width we may be making life more difficult for those using smaller devices. There are several situations when vertical media queries can be useful…

1. Managing Fixed Elements

Does your hamburger icon have its own fixed navigation bar at the top of the screen? Perhaps it’s only 50 pixels, but that could be 10% of the screen on a smaller device or those held in landscape orientation. The user will require more scrolling and find it more difficult to use. Therefore, consider fixing the bar only when the height becomes practical, e.g.

/* static nav bar */
nav {
	width: 100%;
	height: 50px;
	color: #fff;
	background-color: #333;
}

/* fixed nav bar */
@media (min-height: 800px) {
	body {
		padding-top: 75px;
	}

	nav {
		position: fixed;
		top: 0;
		left: 0;
	}
}

Admittedly, this means users have to scroll back to the top of the page to access navigation. For longer pages, consider a less obtrusive fixed element on smaller screens, e.g.

adjust fixed elements

2. Managing “The Fold”

Yes, the fold is dead. The fold is irrelevant to developers and designers; there is no standard screen size, resolution, browser chrome or window height. Unfortunately, it’s not necessarily irrelevant to individual users.

Consider a web page header containing a carousel with a height of 600px. Anyone visiting that page with similar browser dimensions may not realize there is content below — it looks as if the page has neatly ended. They could miss important calls-to-action or further information.

It’s difficult to guarantee the fold won’t affect everyone but there are options. In this example, screens under 500px will show a full-height 600px carousel. The cropped element should make it obvious there’s more content. Between 500px and 800px, the carousel shrinks to 400px so the user can see more content below. At 800px, the carousel returns to 600px but, again, extra content can be seen.

.carousel {
	width: 100%;
	height: 600px;
}

@media (min-height: 500px) {
	.carousel { height: 400px; }
}

@media (min-height: 800px) {
	.carousel { height: 600px; }
}

This technique is unlikely to work in all situations but, at the very least, you could use vertical media queries to ensure call-to-action buttons always appear on-screen without having to scroll.

3. Adjusting Font Sizes and Weights

Smaller fonts can be used on smaller screens. This need not reduce legibility because the device is normally held closer than a monitor.

Even if you choose not to change the body text, those large 24px headings can almost certainly be downsized. This will reduce the scrolling required and is especially useful when the user holds their device in landscape orientation.

4. Adjusting Line Heights and Margins

Similarly, text spacing can be tighter on smaller screens. For example:

h1 {
	font-size: 1.25rem;
	font-weight: normal;
	line-height: 1.2;
	margin: 1em 0 0 0;
}

p {
	font-size: 0.75rem;
	line-height: 1.2;
	margin: 0 0 1em 0;
}

@media (min-height: 50em) {

	h1 {
		font-size: 2rem;
		font-weight: bold;
		margin: 1.5em 0 0.5em 0;
	}

	p {
		font-size: 1rem;
		line-height: 1.5;
	}

}

5. Adjusting Content Visibility

On smaller height screens, you could consider making content ‘optional’. Perhaps you could implement an accordion for some sections or question/answer blocks. At larger heights, all the content could become visible without having to click a heading first.

That said, be wary about completely hiding content. If a widget or feature isn’t useful to someone using a smaller device, why is it necessary to show it on a larger screen?

While min-height and max-height will never be used to the same extent as min-width and max-width they provide a number of design opportunities which we’re only just beginning to exploit.

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

  • Kelderic

    I’ve been using the min-height a lot recently when developing a site with a lot of ‘full-screen’ content. I use full screen to mean backgrounds that are 100% of window width and height, with small floating content that is centered horizontally and vertically. The min-height lets me shift to smaller fonts and sizes for the content when the screen gets too small (for example if a phone is turned to landscape mode).

  • M S

    I use it, and the width one too, to release fixed navigation when the window gets small.

    Lots of sites miss this, even big ones, and it makes them pretty much useless on small screens.

    • Craig Buckler

      Agreed. Horizontal media queries don’t consider devices held in landscape orientation where the width is often reasonably large but the height is quite small.

  • Andrew Sherrard

    Developers certainly have fixed themselves upon device width as the go-to on media queries, with good reason. But completely disregarding the functionality and benefits of using height media queries would be silly. I’m completely guilty of never using a height based media query. So thank you for this, I’m eager to try it out!

    • Craig Buckler

      Let us know how you get on…

  • harishchouhan

    Nice article @craigbuckler:disqus. Funny I never thought about using min-height.

    • Craig Buckler

      Thanks. I’m guilty of it too but I’ve had a couple of recent situations where they suddenly made far more sense!

  • http://ricardozea.me/ Ricardo Zea

    Very interesting Craig, Thanks for sharing.

    OFFTOPIC: Regarding adjusting font-size and line-height, I usually modify the body (in the corresponding media query) rather than specific elements. I’ve noticed that by doing it this way, I spend a lot less time finessing font-size and line-height than before.