Reduce padding between sections on Homepage (Debut theme)

radhikav
Tourist
6 0 1

Hi - What custom code do I need to add to reduce the padding between all the sections on the home page of my site?

I've attached a few reference images below.

My website is: https://jivamorelife.com/

radhikav_0-1632010296259.png

radhikav_1-1632010327801.png

 

Nick_Marketing
Shopify Partner
705 174 213

Try adding this code to the bottom of theme.css

.index-section {
    padding-top: 0;
}
- I am an eCommerce and Marketing Technology consultant based in Toronto, CANADA.
- To inquire about consulting work availability, please send me a Private Message.
- For Shopify Tutorials, Subscribe to my YouTube Channel.
0 Likes
radhikav
Tourist
6 0 1

Thank you!! That worked. How an I reduce the padding between the product images of this collection and the view all button?

 

radhikav_0-1632016286771.png

 

0 Likes
Nick_Marketing
Shopify Partner
705 174 213

You could add this code

hr {
  margin: 30px;
}

 

- I am an eCommerce and Marketing Technology consultant based in Toronto, CANADA.
- To inquire about consulting work availability, please send me a Private Message.
- For Shopify Tutorials, Subscribe to my YouTube Channel.
0 Likes
dmwwebartisan
Shopify Partner
9268 2146 2920

@radhikav 

Please add the following code at the bottom of your assets/theme.css file.

.index-section {
    padding-top: 0;
}

#shopify-section-collection hr.hr--invisible {
    margin: 15px !important;
}

Hope this works.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
radhikav
Tourist
6 0 1

This did work! Can I do the same thing for the rest of the sections on the home page? Example below.

radhikav_0-1633566801062.png

 

radhikav_1-1633566830866.png

 

0 Likes