The problem with viewport heights and how to resolve it.

The problem with the vh unit is that it completely disregards the elements inside of any container that it’s applied to.

Ok that’s it, we’re done, we can go home now! Just kidding, here’s why that’s bad.

The Problem with Viewport Height (vh units)

If you use vh to set the height of your div, section, margin-top/bottom, padding-top/bottom, they now solely rely on your browser’s height to determine its own value.

This is BAD for responsiveness.

Reason being, most (if not all) web developers use media queries that target specific viewport WIDTHS, not heights. This is done so that we can achieve specific styles/layouts on different mobile devices and is crucial to app development. However, this gets flipped on its head when we’re talking solely about browsers. Why?

About

Kevin Canlas

Self-taught dev. Self-taught designer. Wanna-be Stoic. Check out my LinkTree: https://linktr.ee/kvncnls

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store