Streaming live at 10am (PST)

Vh port for mobile


#1

Hi, does anyone know vh and % tricks that works for mobile screens/ports.
It all seems alright px. %, vh on webflow browser - but when I actually look on mobile or even sometimes desktop - headings out of designated marks, some sections doesnt fit in view port, animations on scroll messed up.
and i heard vh is buggy on apple or safary. is there solution for fixed width/hight for mobile port views .
THANX


#2

Classic, and that’s phones manufacturer fault. (Sometimes I say shame). Maybe you’re on Safaris’ iPhone. Well on mobile browsers most of the time, the shrinkable top bar and bottom bar aren’t taking up viewport space. It means you cannot, ever, be sure that a 100vh element will be viewed entirely. It depends if you’re scrolled down the page, if you’re scrolling down, or up, among other factors.

Drives me insane and ruins the UX I want to bring on phone most of the time.

Not buggy, it’s as designed, and it’s designed to make us mad.


#3

I just seen some solution on that in chrome desk in uk vh is 96.15 - so i tried and it did it , but mobile ill try now to reduce by 10 and shift things up. However the question still remains- VH doesnt work on old android like 6.0. I had web designed in webflow was just fine in old android,
untill i got new one lol - all sections messed up no animations on scroll total s@ite not site anymore.
Do you have any “single” solution by chance what works on Android old and Android *?
Also cross-browser solution would be nice, cz whenon chrome is ideal / firefox wont display footer.