how to reduce white space between featured collection images and carousel number

Store Design

Topic summary

A user sought to reduce white space between featured collection images and a carousel on their Shopify store. Their initial CSS modifications didn’t achieve the desired spacing.

Problem Details:

  • Store URL: nailsbysj.com (password-protected)
  • Initial code targeted .card__information and .slider--desktop but spacing remained too large
  • Issue visible on mobile view with only 3 products in carousel

Solutions Provided:
Multiple community members offered CSS fixes targeting the mobile/tablet slider:

  • Add code to styles.css or component-slider.css
  • Target .slider.slider--tablet .slider__slide with padding-bottom: 0px
  • Use media query @media screen and (max-width: 989px)

Resolution:
The user confirmed one of the CSS solutions worked successfully, reducing the unwanted white space as intended.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hi, I have slightly reduced the white space between the featured collection images and carousel but I would like it to still be closer together.

This is the code I used:

.card__information {
padding-bottom: 0px !important;
}
.slider–desktop {

margin-bottom: 0px !important;
}

IMG_7257.png
IMG_7257.png1290×2796 296 KB

1 Like
2

Hey @sjosborne

I can take a look at this. Can you share the store URL? If it’s password-protected, then the password would be needed too.

3

Hi

URL: https://nailsbysj.com

password: reucka

4

I don’t see the carousel. Is it disabled?

5

Hi, no i don’t think so. I can see it?

There is only 3 products

6

Hi @sjosborne :blush: Ellie again from BOGOS, #1 Shopify Promotion App

Please paste this CSS code into any CSS file.

.grid__item.slider__slide{ padding-bottom: 0px !important; }

Let me know if it works or not! Appreciate it if you could Like and Accept as Solution if my answer was helpful!

7

1: Go to Online Store → Theme → Edit code.
2: Search for styles.css
3: Paste the below code at the bottom of the file → Save

@media screen and (max-width: 989px) {
.slider.slider--tablet .slider__slide {
	padding-bottom: 0px;
	}
}

Final result:

Screenshot_2.png
Screenshot_2.png509×655 51.7 KB

8

@sjosborne :blush: Appreciate if you could try and tell me if my code worked or not :blue_heart:

9

Hello @sjosborne
Go to online store ----> themes ----> actions ----> edit code ----> assets ----> component-slider.css
add this code at the end of the file and save.

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

result

53.png
53.png376×525 66.9 KB

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

10

Hi this worked, thank you