Debut theme : how to reduce padding between homepage sections and section in product page?

Store Design
1

Hi developers,

Hope you are doing good.

I need to reduce padding space between sections in the homepage and some sections in the product page. Can’t seem to figure it out on my own.

This is my first shop on Shopify and trying to make it look better.

Thank you in advance.

Capture.PNG
Capture.PNG1837×639 65.1 KB

Capture2.PNG
Capture2.PNG1725×566 24.2 KB

Capture3.PNG
Capture3.PNG1632×717 39.2 KB

Capture4.PNG
Capture4.PNG1742×689 56.7 KB

2

Hi @nair

Thanks Welcome to the Shopify community!
Please share your site URL,
So I will check and provide a solution here.

3

Hi @nair

  1. Go to Online Store->Themes->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.index-section {
    padding-top: 30px;
    padding-bottom: 30px;
}
hr {
    margin: 30px 0;
}
.site-footer__hr {
    margin: 0px 0 20px 0;
}
1 Like
4

Hey Vikas!

My page looks much cleaner and better. Being a social media marketer this was a bit out of my expertise!

Came to right place and got the right help! Thank you!

:slightly_smiling_face:

1 Like
5

Hey @Vikas_Chovatiya ,

Hope you are doing good.

Just need your help again with the website. Could you please help me with the spacing issue in the newsletter section ōf my website? Want it to be a little more closer and cleaner than the image below.

Do let me know how I could get it enhanced.

nair_1-1598628564059.png
nair_1-1598628564059.png1686×754 105 KB

Thanking you in advance!

6

Hi @nair

  1. Go to Online Store->Themes->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.newsletter-section .section-header {
    margin-bottom: 20px;
}
.newsletter-section {
    padding-top: 30px;
}
.newsletter-section .form-single-field {
    margin: 0 auto 30px;
}
.site-footer {
    padding: 20px 0;
}
1 Like
7

@Vikas_Chovatiya , it worked again!

Looks better and cleaner too :slightly_smiling_face:

Thank you for helping out again!

1 Like
8

Hi there Nair

I tried this on my Debut theme website as way too much spacing between my sections - but didn’t work, can you help?

9

sorry I tried again it did work, sorry about that!

10

sorry it did work, but spacing still very wide on mobile site, can you help with that?

11

Hi @Emelby

Please share Your Site URL

12

Hi and good day

I need to reduce padding between two media on Shopify, but if I try with the code that you post one media stay on top of the principal banner. if you can help me, I would be very grateful (sorry if my english is wrong, I don’t speak very well), I will put two images to show how it looks

1.png
1.png1361×636 314 KB

2.png
2.png1361×631 392 KB

13

This doesnt work for me…every time I copy and paste a code from the shopify community it doesnt do anything and then it shows that code at the bottom of the website. Help :disappointed_face: ! What am I doing wrong?