Quick Tip: Spare a Thought for Vertical Break Points

I've seen this happen a few times recently, usually on websites with fixed navigation running down the left hand side. They'll have lovely, fluid layouts, which stretch out on wide screens and stack up on smaller devices, but they'll still fall foul of a sneaky break point few people think about. I'm taking about viewport height.

For Example

Let me give you an example. Here's a simple responsive layout; two columns which behave exactly as you'd expect. Make the browser grow and shrink and you'll see what I mean.

A couple of layouts dependant on the viewport width — A couple of layouts, dependant on the viewport width

This layout begins mobile first, with the two divs stacked up on top of each other. It then splits into columns, with its fixed left column, at screens with a minimum width of 800px.

1	@media screen and (min-width: 800px) {
2	}

The main content scrolls up and down, while the first column remains fixed to the left. We can slot a navigation in the left column, perhaps an avatar, that sort of thing.

There's a Problem

All appears fine, but look what happens when we shrink our browser vertically; the navigation becomes hidden and inaccessible.

The main content scrolls but I cant click on the lower menu items — The main content scrolls, but I can't click on the lower menu items!

I don't actually know of anyone who browses like this, but still, we can't assume that a wide screen automatically means tall screen too.

The Solution

Media queries are capable of identifying far more than just page width; they can react to pixel-density, orientation, whether the screen is color or monochrome, the aspect-ratio, loads of things.

In this case we can rely on the straight-forward min-height, by adding a second condition to our existing media query:

1	@media screen and (min-width: 800px) and (min-height: 500px) {
2	}

Now our fixed-left-column arrangement will only take effect once the screen is wider than 800px and at least 500px high. Check out the demo and see for yourself.

Another Solution

We don't have to completely alter the layout to make our menu accessible. We could instead add a separate scrollbar to the navigation column when the viewport isn't high enough to reveal all of it, take a look.

@media screen and (max-height:500px) {
	.col-first {
		height: 100%;
		overflow: scroll;
	}
}

It's about resolving things in the most appropriate way.

Conclusion

A shallow viewport can really restrict what's visible on a web page. Take a look at how Gmail reduces the table padding if there's less vertical real estate:

Shrunken rows if theres less vertical space thanks to a min-height media query — Shrunken rows if there's less vertical space

This Gmail example proves that a break point doesn't have to mean a layout is broken, instead see it as an opportunity to improve things.

In any case, I hope this has reiterated the importance of not assuming anything where break points are concerned. Let us know in the comments if you've ever used min-height media queries, and what for!