Adjust spacing between product images and pagination in featured collection carousel (Sense theme)

Technical Q&A
1

Hi,

I’m using the Sense theme and have added a featured collection section with a carousel slider on my Shopify homepage. On the mobile version, the pagination indicator (e.g., “Page 1 of 3”) shows below the product images.

I want to adjust the spacing between the product images and the pagination throughout the entire featured collection carousel because the current gap is too large.

www.kyotsu.ch
PW: kyotsu.ch

How can I globally reduce or customize this spacing for all slider items in the featured collection on mobile?

Thanks for your help!

Best regards,

Tobias

2

Hi @tobiaszellweger ,

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
@media(max-width:768px){
.slider.slider--tablet .slider__slide {
    padding-bottom: 0px !important;
}
}

Result:

topnewyork_0-1748525351863.png
topnewyork_0-1748525351863.png313×547 47.9 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! :rocket: (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!

3

Hello @tobiaszellweger
Go to online store ----> themes ----> actions ----> edit code ----> base.css
add this code at the end of the file and save.

@media screen and (max-width: 989px) {
.collection .slider.slider--tablet {
margin-bottom: 0rem !important;
}
}

result

31.png
31.png380×520 40.9 KB

If this was helpful, hit the like button and accept the solution.
Thanks

4

This worked, thank you so much! :slightly_smiling_face: