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.

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.

Frequently Asked Questions (FAQs) on Vertical Media Queries