Padding on collection text page

How do I add a padding around the collection text, and a padding inside the text aswell

1 Like

sorry I forgot to add an image

Hey @Issued900 ,

Can you please share your store URL, that way we’ll be able to write down CSS for you :slightly_smiling_face:

Thanks,
Shubham | Untechnickle

Hey thanks for the response

The store URL is https://hypelockeruk.com

The collection page is https://hypelockeruk.com/collections/air-jordan

To add padding around the collection wrapper, please add this css to your base.css file:

.collection-text-text .collection-hero__inner .collection-hero__text-wrapper {
    padding: 4rem !important; // Change the value according to your requirement
}

Moreover, to add padding around the text - add this CSS:

.collection-hero__title {
    margin: 2.5rem 0 1rem; // Adjust this accordingly
    padding: 3rem !important; // Adjust this accordingly
}

Let me know if you’ve any more questions for me, would love to help :slightly_smiling_face:

Cheers!
Shubham | Untechnickle

Hey, I’ve tried it but it didn’t change anything

Hello @Issued900

Go to Online Store, then Theme, and select Edit Code.
Search for assets/theme.css Add the provided code at the end of the file.

.collection-text-text .collection-hero__inner .collection-hero__text-wrapper {
    padding: 4rem !important;
}
.collection-hero__title {
    margin-bottom: 20px!important;
}

Still doesn’t work, I put the code in, refresh my website but nothing changes

1 Like

Hello @Issued900

Go to Online Store, then Theme, and select Edit Code.
Search for assets/theme.css Add the provided code at the TOP of the file.

1 Like

done that aswell, still doesn’t work, is there a reason for this?

That’s strange.

Can you please share you collaborator code? We’ll need to dig a little deeper in your theme code to understand what’s blocking it.

Looking forward to hearing from you,
Shubham | Untechnickle

Hey @Issued900 ,

Instead of adding the code to base.css, please update the padding in the collection-hero.css.

That’s the file which is actually controlling the style of collection header. You’ll find the similar classes there, just update the padding.

Hope that helps :slightly_smiling_face:

Cheers!
Shubham | Untechnickle

Hi @Issued900

  • You can try to follow this step
    Step 1: Go to Edit code
    Step 2: Find file theme.css and add this code at the end of the file
.collection-hero__text-wrapper {
    padding: 4.5rem !important;
}

Result:

Best,

Liz