Skip to content

Height Targeted Media Query

With responsive design, we are very focused on widths. Our media queries, image sizes, containers, and so on are based on widths. It makes sense, but we’re not limited to that option alone. Media queries can grab a great deal of information, so why not target the window height?

We can do @media (min-height:400px) to modify vertically oriented objects at a shorter height. The best use case scenario I can imagine is a position:fixed side navigation that gets obscured and unusable by a short window height. Perhaps you have a large image you want to fill the screen, in the case of Notre Dame’s homepage. With a height-based media query, we can resize the background image to maximize (or minimize) the space the image takes up.

I put together a quick demo to show how a @media (min-height: x) works.