The problems with viewport units
Why Stack Overflow recommends it
Stack Overflow users link it when answering questions about layouts that break or jump on mobile browsers because of 100vh and 100vw.
Recommended by 3 people across 3 different months, 2023 to 2025.
What it is
Kevin Powell explains why CSS viewport units like 100vw and 100vh often cause trouble, covering unwanted horizontal scrolling, mobile browser toolbar issues with 100vh, and problems with fluid layouts. He demonstrates alternatives such as dynamic viewport units (dvh) and shows when they are safe to use.
What people said
Recommends 2pha · 2023-03 · Stack Overflow · on “container element not displaying correctly in chrome mobile”
the description of your problem "will be messed up" is not clear. Be careful using viewport units for height as explained here: [this video]
Recommends Jake · 2023-04 · Stack Overflow · on “How to make div full width of screen”
It's not entirely clear what you mean by "responsive", but you can fill the viewport with a div by using `height: 100vh` and `width: 100vw`. You may also want to check out this video [this video] for some tips/pitfalls with this approach.
Recommends kstepien · 2023-07 · Stack Overflow · on “Div's size changing when scrolling on Firefox Mobile, but it doesn't have to. Angular”
There is a problem with 100vh. I recommend to you to visit this video about it. [this video] You can find solution (again) on YT video. [LINK] you can probably use dvh and dvw [LINK] Or if you are scary about it, you can use @support to check if this solution can be implemented.
Cites jme11 · 2025-07 · Stack Overflow · on “I want to have the circular image be in the middle of the blue background image and the container and the rest of the text be below without overlap”
The easiest way to think of this is that you want to keep everything in the normal flow of the document, but you just want to shift everything from the profile image up about half the distance of the image. There are two very simple approaches to do that: use a negative top margin use transform translate (or just translate) on the Y axis The negative top margin is actually the way I'd do this because it's pretty easy in this case. *, *:before, *:after { box-sizing: border-box; margin: 0; } body { min-height: 100vh; background-color: hsl(185, 75%, 39%); } main { display: grid; place-content: center; min-height: 100vh; } .main-container { background-color: white; display: flex; flex-direction: