How to get rid of Gaps between slideshow on mobile preview

[DoE1]

Hi my online store has gaps between the product cards and the carousel number switch. This gap wasn't a deal breaker until i decided to use a slideshow for my homepage. When you switch to mobile preview there is a very big gap between the slideshow image and the slider. I'm using custom css to have 2 different slideshows, one only visible for desktop and one for mobile version. My priority is the slideshow gap but, i'm also looking for solutions to fix the overall product card and carousel number gaps. 

url: shopsade.com

custom css for desktop version:

@media screen and (max-width: 750px) {
.banner,
slideshow-component {
display: none;
}
}

custom css for mobile version:

@media screen and (min-width: 750px) {
.banner,
slideshow-component {
display: none;
}
}

 

[DaisyVo · Accepted solution]

Hi @DoE1 

I hope you are well. You can follow our instructions below:

1/ Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
2/ From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
3/ Copy the code below and paste it there

Here is the code for Step 3:

Code 1: 

ul.grid.product-grid > li {
    padding-bottom: 0 !important;
}
ul.grid.product-grid > li  .card__information {
    padding-bottom: 0 !important;
}

 

Code 2:

@media screen and (max-width: 768px){
.slideshow__text-wrapper {
    display: none !important;
}
}

 

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

[DoE1]

Thank you so much! this fixed my problem at an instant, it was also very easy to implement

have a great day thanks for your help!