Reduce padding between Rich Text and Collection List (Narrative theme)

Highlighted
Tourist
22 0 2

Hi, I am trying to reduce the padding between the Rich Text and Collection List on my homepage. Could someone please help me? I have attached a screenshot of what it looks like.Screenshot (346).png

0 Likes
Highlighted
Trailblazer
263 68 74

Hi @amckie 

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
-Want to modify or custom changes on store Hire me.
- Feel free to contact me on vikaschovatiya02@gmail.com regarding any help
If you are happy and want to donate small Click here (Its my paypal)
0 Likes
Highlighted
Tourist
22 0 2

Hi, here is the link:

https://dizzy-goose.myshopify.com/

Password: shophere

0 Likes
Highlighted
Trailblazer
263 68 74

Hi @amckie 

Thanks for the share URL.
1. Go to Online Store->Themes->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media only screen and (min-width: 750px){
	.hero--medium .hero__inner {
	    padding: 140px 0 50px 0;
	}
	.collection-list {
	    padding: 0 0 50px 0;
	}
}
If helpful then please Like and Accept Solution.
-Want to modify or custom changes on store Hire me.
- Feel free to contact me on vikaschovatiya02@gmail.com regarding any help
If you are happy and want to donate small Click here (Its my paypal)
0 Likes
Highlighted
Tourist
22 0 2

That worked but the rich text and collection list is not a bit too close to each other. How can I make it so the padding between the two matches the padding between the rich text and the blue area, or maybe a little less then that?

Screenshot (348).png

0 Likes
Highlighted
Trailblazer
263 68 74

HI @amckie 

1. Go to Online Store->Themes->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media only screen and (min-width: 750px){
	.hero--medium .hero__inner {
	    padding: 50px 0;
	}
}
If helpful then please Like and Accept Solution.
-Want to modify or custom changes on store Hire me.
- Feel free to contact me on vikaschovatiya02@gmail.com regarding any help
If you are happy and want to donate small Click here (Its my paypal)
0 Likes
Highlighted
Tourist
22 0 2

I tried that but that didnt end up doing anything. I ended up doing this instead which worked:

@media only screen and (min-width: 750px){
.hero--medium .hero__inner {
padding: 100px 0 100px 0;
}
.collection-list {
padding: 0 0 50px 0;
}
}

 

Thank you!

1 Like