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

Waller
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 https://cablenova.com.


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

0 Likes
KetanKumar
Shopify Partner
14323 1665 5154

@Waller 

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

https://cdn.shopify.com/s/files/1/0525/9988/1891/files/led-charging-cable-banner.jpg?v=1611092154

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