Problems with product carousel white space between products

[yessirq]

Hey guys, 

I have a problem with showing the products on mobile. I now have the carousel option enabled but It gives me a lot of white space on mobile. Here is an screenshot.

Page issue : https://jardinbutchery.nl/collections/frontpage

Password: 1234

Theme: Masterchop-meat

 

[Hardik29418]

@yessirq  On which page?

[yessirq]

https://jardinbutchery.nl/collections/frontpage

[theycallmemakka]

Hi @yessirq ,

Can you let me know which page has this issue? On my end the home page looks fine. However if you still want to reduce the whitespace, you should try adding below code on base.liquid

#shopify-section-template--20292299850059__16305701682495e701.home-product-carousel .product-collection.dt-sc-column {
    gap: 10px;
}

[yessirq]

Thanks for the reply! Its about this page : https://jardinbutchery.nl/collections/frontpage

[theycallmemakka]

Hi @yessirq ,

I see the collection has this issue. The issue seems to be because of not having image on some product. As there is no product image, the theme is showing default image which has large height. Because of this the height of the wholw slider is increased.

So you should try adding images on the below mentioned product and see if this issue gets fixed.

[yessirq]

I added some place holder pictures. Its not fixed unfortunately. I cant seem to find any html code that makes the white space changeable. 😞  

[theycallmemakka]

Hi @yessirq 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

<style>
.swiper-container .swiper-slide img {
    max-height: 235px;
}
.dt-sc-swiper-slider.swiper-container .swiper-slide {
    margin-top: 0px!important;
}
</style>

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

[yessirq]

It worked! Thanks man. Only issue now is that the slider on my homepage also got effected. Is there a way to add a css code for a specific page only?

[theycallmemakka]

Can you try replacing the previous code with this one. This should target one page only.

<style>
#template--20964945002827__home_product_carousel_ywRCLA .swiper-container .swiper-slide img {
    max-height: 235px;
}
#template--20964945002827__home_product_carousel_ywRCLA  .dt-sc-swiper-slider.swiper-container .swiper-slide {
    margin-top: 0px!important;
}
</style>

And It's 11 PM here in Nepal. So, I will be away from the keyboard for the next 8 hours. I hope this resolves the issue. If not, please let me know, and I will provide you with a solution within the first hour after I wake up tomorrow. 😄

[theycallmemakka · Accepted solution]

Hi @yessirq ,

I just noticed it didnt work. Can you try adding this updated code again.

<style>
 .swiper-container #swiper-template--20964945002827__home_product_carousel_ywRCLA-slider .swiper-slide img {
    max-height: 235px;
}
.dt-sc-swiper-slider.swiper-container #swiper-template--20964945002827__home_product_carousel_ywRCLA-slider   .swiper-slide {
    margin-top: 0px!important;
}
</style>

[yessirq]

Yes it worked! Thanks man you a life saver, really appreciate the help! Have a great night