PLS HELP!!! - BROOKLYN THEME - Space below hero image resizes in mobile browser on scroll

New Member
2 0 0
I'm fairly new to web design, with a decent understanding of HTML and CSS and I'm using the Shopify Brooklyn theme to build my site.

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.

Please see THIS VIDEO for an example of my issue. My site is

Thank you for reading, I'd really appreciate any help you can give me with my issue

Shopify Partner
14323 1665 5154


Sorry, you are facing this issue, it would be my pleasure to help you.

i have checked this issue 

your image is portrait mode may sure upload a landscape image

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on regarding any help
Shopify Expert | Skype :
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing