Fix your mobile viewport's with this simple css trick

In this video cover a simple css trick to fix your mobile viewport when using a height value of 100vh. On many mobile browsers, when using this height value, it does not account for the navigation within the browser itself. This leads to unexpected / undesired behavior. Using a few lines of css, we are able to fix this issue.

[_briantravis]

THANK YOU. SO MUCH. Stumbled upon this by accident but it's the issue that's been frustrating me for the past couple of days.

[oluwaseunajibowo]

How can I like this video multiple times 😊😊😊.... well done great trick

[sashafroyland]

Helpful. Thank you for explaining the issue.

[deeOOgh]

There’s now a unit for this: svh (small vertical height)

On modern browsers, replace 100vh with 100svh and you’re done. 🙂👌

[hanschris]

THANKS BROO IT WORKED FOR ME, IVE BEEN LOOKING FOR THIS FOR A WHILE!!! GOD BLESS YOU!!

[abhaygupta]

Thank you very much for solving this bug, this 🐞 was really biting me and you helped. 🤩

[gunlord]

Nice tip. Thanks for providing high quality videos!

[eslamahmed]

Thanks man it works ! .. I wonna add little thing here :
-if U wonna wrap your section with a container and wonna give it the full height and width, U should write something like this:

html {
height: -webkit-fill-available;
}

body {

height: -webkit-fill-available;
}


\* and the important part that also your container should be like this: */

.container{
height: 100vh;
width: 100vw;
position: relative;
height: -webkit-fill-available;
}

[rokov_babca]

I luv u si much! I just can't tell You how many hours i spent trying to work arround what You did! Thanks a lot!

[pranavjadhav]

IT WORKED! Thanks, man you saved my day.

[jeffreymercado]

Thanks! it worked for me. At the beginning it didn't. But it was because the element I wanted to I haven't set the '-webkit-fill-available'

[erhanbulut.]

if I want to add pop up modal ofcourse we need to add overflow: hidden to body so background will not scroll up or down on touch. But then with your method page will scroll to top because you gave static height to the body. is there any solution for that without js?

[codebymanu]

Thank you very much. It’s really helped me a lot.❤

[stephenprice]

I’ve already created my website so is it too late for me to adjust it to fit a mobile device?

[DarkSociety]

Thank you so much man u saved me so much time 💖 subbing ur channel now :)

[aniketdandekar]

Thank you for the tip, It really helped!

[muhammadali]

\thanks bro it opens my mind to a new set of things

[magudodo]

how to fix that the font look normal in desktop browser and small in phone browser

[utkarsh_vr]

It worked, but the browser navigations (top & bottom) are not going back on scroll

[FaithFedora]

I need help😩😩 my css isn’t working on iOS mobile. Tried viewing on android and it works perfectly well, but when I try viewing on an iOS device, it’s shows just plain html. How do I fix this ?