How to fix white space under mobile slideshow without losing slides?

Store Design
1

Hello,

I have a large wide white space under my slideshow on the homepage - on mobile only. I spoke to the website creators and they gave me the code to fix the white space (see below; online store/themes/actions/edit code/assets/stylesheet.css.liquid) however, when I do this it fixes the space but only the 1st banner in the slideshow is shown, the rest of the slides are white / blank.

@media screen and (max-width: 740px) {
ul.slides li {
padding-bottom: 0 !important;
}
}

URL is www.cleoharper.com.au

Screenshots attached.

IMG-2674.PNG
IMG-2674.PNG1242×2688 373 KB

IMG-2675.PNG
IMG-2675.PNG1242×2688 191 KB

2

@Courtney_Hogan

Please add the following code at the bottom of your assets/stylesheet.css file.

@media only screen and (max-width: 740px){
.slide--44410f67-297a-4097-a5d5-538372897b23 {
padding-bottom: 0px !important;
}
}

Hope this works.

Thanks!

3

Thank you so much, unfortunately it didn’t work - didn’t make any change.

We have the Icon theme.

Homepage.png
Homepage.png393×825 57.5 KB

4

@Courtney_Hogan

Please try the following code.

@media screen and (max-width: 980px)
li#slide--44410f67-297a-4097-a5d5-538372897b23 {
    padding-bottom: 0px !important;
}
}
5

Thank you, but unfortunately no change.

I’ve attached the stylesheet.css.liquid file - maybe the new code is conflicting with existing?

6

@Courtney_Hogan

Remove previous code and try this code

@media screen and (max-width: 740px){
#slide--44410f67-297a-4097-a5d5-538372897b23 { padding-bottom: 0px !important;}
}

Thanks!

7

No change.

I’ve contacted the theme developers, will see what they say.

Thank you very much for your help!