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

Solved
Sam08
Tourist
7 0 1

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:

 Sam08_0-1614698472504.png

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

Sam08_1-1614698567626.png

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:

Sam08_2-1614699607971.png

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

Sam08_3-1614699738926.png

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
Shopify Partner
17311 1873 6470

@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.

 

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
0 Likes
Sam08
Tourist
7 0 1

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

0 Likes
KetanKumar
Shopify Partner
17311 1873 6470

@Sam08 

sorry your password doesn't work

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
0 Likes
Sam08
Tourist
7 0 1

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

0 Likes
Sam08
Tourist
7 0 1

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

0 Likes
Nexima
Tourist
4 2 2

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.

Nexima_0-1615526483285.png

Hope it worked for you,
Nexima

0 Likes
Nexima
Tourist
4 2 2

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

0 Likes
Sam08
Tourist
7 0 1

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:

Sam08_0-1615543477696.png

 

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:

Sam08_1-1615543818768.png

Issue:

Sam08_2-1615543977050.png

 

Do you know the css fix for this please?

 

Thank you for your help

 

Sam

 

 

0 Likes
Nexima
Tourist
4 2 2

This is an 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