Solved

Problems with product carousel white space between products

yessirq
Tourist
7 0 1

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

 

Screenshot 2024-04-07 at 14.42.31.png

Accepted Solution (1)
theycallmemakka
Shopify Partner
1477 336 360

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

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

View solution in original post

Replies 11 (11)

Hardik29418
Shopify Partner
2913 419 1080

@yessirq  On which page?

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email

theycallmemakka
Shopify Partner
1477 336 360

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;
}

theycallmemakka_0-1712494534672.png

 

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

yessirq
Tourist
7 0 1

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

theycallmemakka
Shopify Partner
1477 336 360

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.

 

theycallmemakka_0-1712494678937.png

 

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

yessirq
Tourist
7 0 1

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
Shopify Partner
1477 336 360

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

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

yessirq
Tourist
7 0 1

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
Shopify Partner
1477 336 360

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

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

theycallmemakka
Shopify Partner
1477 336 360

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

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

yessirq
Tourist
7 0 1

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