Hey,
I’m trying to stretch an image to full height, but it doesn’t quite work for the mobile version.
Desktop Version:
Mobile Version:
On both versions the header is 10vh height, the section 90vh.
I think the problem ist the browsers menue.
Do you know how to fix this problem and stretch the image to full height?
Are you trying to add the image so that it goes full screen no matter how much content is in it, like a background, but below the header?
vh applies to the view port of the device and is not necessarily the full height of a page. If you working with sections, click on the expansion to expand the image to the full extent of the section it is in, but ask yourself this question about how tall your mobile page really is. Do you have to scroll at all? IF yes, then set a min height vh90 but allow the section to expand with the content after that. Then the image’s bottom edge will follow the bottom edge of the section it reside in.
Make sense? I hope this helps.
The problem is indeed the mobile browser bar (specially Chrome’s mobile browser bar cuz I know Microsoft Edge or Opera have mobile apps with fixed top bars) and there’s sadly nothin’ you can do about it: as you scroll down, the Chromebar hides stretching the viewport and when you scroll back top, the bar reappears from above. So, yeah, Chrome’s mobile viewport is constantly changing at scroll and hence the viewport-sized items dynamically resize with it, that’s just the browser’s behavior.
I know it’s a bit unpleasant (as graphic designer and ocd oops) but people in general are already accustomed to it: mobile browsing is now the most familiar of internet experiences in general and top-nodge pages and websites are designed with full-height sections and images anyhow, showing the exact same behaviour in their mobile versions. But visitors are accustomed to it.
but allow the section to expand with the content after that.
How can I do this? so I set a min height to 90vh and the height to auto?
I tried to set a max-content in grid, but the section isn’t full height in mobile.
Why add another row below the 90vh row, make that more flexible? Min height or auto is what I do.
