Problems with product carousel white space between products

Store Design

Topic summary

A user encountered excessive white space in a product carousel on mobile devices for their collection page. The issue stemmed from products lacking images, causing the theme to display default images with large heights that increased the entire slider’s height.

Resolution steps:

  • Initially suggested adding placeholder images to products missing them
  • When that didn’t resolve the issue, custom CSS code was provided to be added to theme.liquid (just above the </body> tag)
  • The code successfully reduced white space but inadvertently affected the homepage slider as well
  • A page-specific CSS solution was then provided to target only the collection page

Outcome:
The issue was successfully resolved with the page-specific CSS code. The discussion reached a complete resolution with the user confirming the fix worked without affecting other pages.

Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.
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
Screenshot 2024-04-07 at 14.42.31.png672×1432 182 KB

2

@yessirq On which page?

3

https://jardinbutchery.nl/collections/frontpage

4

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
theycallmemakka_0-1712494534672.png442×655 218 KB

5

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

6

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
theycallmemakka_0-1712494678937.png573×829 86.2 KB

7

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

8

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

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

1 Like
9

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?

10

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

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. :grinning_face_with_smiling_eyes:

1 Like
11

Hi @yessirq ,

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

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

1 Like