How do I add a padding around the collection text, and a padding inside the text aswell
Hey @Issued900 ,
Can you please share your store URL, that way we’ll be able to write down CSS for you
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
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
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.
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
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