Hello -
When scrolling down from the top of my site pages on mobile the hero images get larger (and the hero verbiage shifts down). I understand why this is happening…the height changes when the browser bars/buttons change size or disappear upon scroll and because I am using 100vh to make the hero fill the screen the hero image and text then change size to fill the “larger” screen. To resolve this @habitualshaker generously pointed me here for a css/js solution. However, I implemented it on my site and whereas the vh calculation modification worked the viewport resize function did not. As such, if the device orientation changes, the screen layout is a bit of a mess (especially going from landscape to portrait).
In doing some research I found the following site - patagonia.com - that doesn’t resize when scrolled on mobile and also automatically adjusts correctly when the device orientation changes. It does not look like they are using the css-tricks fix mentioned above as I do not see calc(var(–vh, 1vh) * 100) being used within their CSS when performing a search via the browser web inspector. I tried to discern via their site code how this is being done but am not able to.
Does anyone know how this site is doing this?
Many thanks for the input/assistance.