I'm having an issue with my site's hero image on mobile where the browser's top and bottom bars disappear on scroll and cause the space below the hero image to expand vertically and shift the content below it downwards.
I'm pretty sure this is caused by the viewport height changing whenever the bars disappear/reappear, as the height is set to 100vh. However, it's not the image that resizes, it's the whitespace below.
If you inspect element, you can get a better understanding of what I mean by the white space - See this video for an example
I'd still like the hero image to act the same as it currently does (by covering the full height and width of the screen), but get rid of the space at the bottom that resizes based on the viewport.
Thank you for reading, I'd really appreciate any help you can give me with my issue