Reduce padding between sections on Homepage (Debut theme)

radhikav
Tourist
6 0 2

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

 

Replies 5 (5)

Nick_Marketing
Shopify Partner
1487 336 464

Try adding this code to the bottom of theme.css

.index-section {
    padding-top: 0;
}
Nick | Ecommerce & Marketing Technology Consultant | Toronto, CANADA
- For consulting work availability, please send me a Private Message or submit a ✍️Contact Form.
- For FREE Shopify Tutorials, Subscribe to my YouTube channel (▶️ Ecommerce TV).
radhikav
Tourist
6 0 2

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

 

Nick_Marketing
Shopify Partner
1487 336 464

You could add this code

hr {
  margin: 30px;
}

 

Nick | Ecommerce & Marketing Technology Consultant | Toronto, CANADA
- For consulting work availability, please send me a Private Message or submit a ✍️Contact Form.
- For FREE Shopify Tutorials, Subscribe to my YouTube channel (▶️ Ecommerce TV).

dmwwebartisan
Shopify Partner
12289 2547 3698

@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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
radhikav
Tourist
6 0 2

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