How do I decrease Collection Banner Top Padding

Store Design
1

After enabling show collection image on the collection banner. The top padding of the collection banner became way too high. This problem only seems to appear on mobile. Ive tried lots of codes but no luck, any help is appreciated.

My website is heritagenecklaces.com

385538217_2321970804642717_771686810520746716_n.jpg
385538217_2321970804642717_771686810520746716_n.jpg1536×2048 1.18 MB

403417624_356388590411663_7228830879448632129_n.jpg
403417624_356388590411663_7228830879448632129_n.jpg945×2048 152 KB

2

Hi @HeritageN , add the below code to your theme’s CSS file.

.collection-hero--with-image .collection-hero__text-wrapper {
    padding-top: 2rem !important;
}

Notice I used 2rem here. You can increase or decrease like 2.5rem or 1rem per your need.

1 Like
3

Thanks it worked!

Do you happen to know also how to decrease the space between the collection description and the collection image and the space between the collection image and the products

?

369990333_374212365066364_8539893681559865149_n.jpg
369990333_374212365066364_8539893681559865149_n.jpg945×2048 183 KB

4

Sure, to control the gap between the collection image and the collection description, you just need to add the padding-bottom in the above code like below.

.collection-hero--with-image .collection-hero__text-wrapper {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

To control the gap between the collection image and the products, add this code.

.collection-hero--with-image .collection-hero__inner {
    padding-bottom: 0.5rem !important;
}

If it helps, don’t forget to hit the like button :+1:

1 Like
5

Thanks it worked I appreciate it!

Dropped a Like!

1 Like