Brooklyn Theme Hero/Slideshow Bug - Large Whitespace below Hero Section

[Sam08]

Hi,

The current release of the Brooklyn Theme has an issue with the hero slider where on mobile if you change from portrait to landscape and then back to portrait the slideshow image does not resize correctly and there is lots of whitespace between the slideshow and the section below.  It can also be repeated on desktop if you have you have the browser at half  height on your screen, refresh the page and then use your mouse to increase the height of the browser

I would really appreciate some help with this please?  This issue will be present for all people who use the current release of the Brooklyn Theme.

Here is the repeatable test:

1) Import the Brooklyn Theme.

2) In the customizer select slideshow -> Add slide and select an image

3) Set the Slide Height setting to Full Screen.

4) Preview the theme and in the Chrome developer tools change from desktop to mobile.

5) The below image shows an example:

 

Scroll down a bit and you can see the the rich text section below the slideshow:

6) Select the rotate icon to change to landscape and then click the click again to change back to portrait.

7) The below screen shot shows the image does not resize correctly so is not full screen and lots of white space:

Scroll down a bit and you can see the rich text section:

To temporarily fix the issue you have to refresh the page.

I have tried to update the CSS for the hero slider but without success.

Please help

Thanks,

Sam

[KetanKumar]

@Sam08 

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

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[Sam08]

Hi @KetanKumar 

Thank you for your quick reply and for looking into this issue

Here is the url:

https://9ttr03oh185c16bq-54903898295.shopifypreview.com

Password: test

Thank you...

Sam

[KetanKumar]

@Sam08 

sorry your password doesn't work

[Sam08]

Hi @KetanKumar

I have tested the link on Chrome and Edge on desktop and on chrome on mobile and the password works ok.

I also forwarded the link to a friend and the password worked.

Please can you try again?

The password is:

test

(All lowercase and no spaces)

Thanks,

Sam

[Sam08]

Hi @KetanKumar

Please can you help with this issue?

As mentioned in the below email I have tested the password and it works.

Alternatively the issue can easily be repeated by Importing the Brooklyn Theme.

Thank you,

Sam

[Nexima]

Hi Sam!

I faced the same issue as you, but managed to resolve it by changing the Slide Height setting to Adapt to First Image. Not sure if it'll work for you too, but you can give it a shot.

Hope it worked for you,
Nexima

[Nexima]

Alternatively, if you would like to continue using Full Screen for the Slide Height setting (to retain full height content behavior for mobile), I found that appending the following CSS to the bottom of theme.scss.liquid works as well.

.slick-slide {
  height:100vh !important; 
  width:auto;
}

Hope it worked for you,
Nexima

[Sam08]

Hi @Nexima 

Thank you so much for your replies.  It is much appreciated.  I tried changing to adapt previously but I wanted the the slideshow to be full height on mobile.

I tried your CSS fix and that fixes the issue on mobile so that is awesome thank you

I noticed there is a still an issue on desktop when only changing the height of the browser window.  

Here is the explanation:

When a browser is fully maximised you can use the below button to reduce the size of the browser:

If you were to then use the maximise button to go to full screen again the slideshow would correct its size and works fine.

However if you only increase the height of the browser window then you get lots of whitespace below the slideshow and the next section and the slideshow text starts to disappear of the slideshow.

Adjusting height only:

Issue:

Do you know the css fix for this please?

Thank you for your help

Sam

[Nexima · Accepted solution]

Hi Sam,

Please replace the previous fix with this instead.

/* Fix to make hero slideshow remain fullscreen even after maximizing or resizing */
.slick-list {
  height:100vh !important; 
  width:auto;
}

 It seems to work better

Hope it works,
Nexima