Padding on collection text page

[Issued900]

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

[Issued900]

 sorry I forgot to add an image

[TheUntechnickle]

Hey @Issued900,

Can you please share your store URL, that way we'll be able to write down CSS for you 🙂

Thanks,
Shubham | Untechnickle

[Issued900]

Hey thanks for the response

The store URL is https://hypelockeruk.com

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

[TheUntechnickle]

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 🙂

Cheers!
Shubham | Untechnickle

[Issued900]

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

[TheUntechnickle]

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

[TheUntechnickle]

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 🙂

Cheers!
Shubham | Untechnickle

[devcoders]

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;
}

[Issued900]

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

[devcoders]

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.

[Issued900]

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

[LizHoang]

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