How can I adjust padding in the Debut theme?

[MPOPernille]

Hi,

Someone out there that can help me change the padding between most sections for the front page of my store?

My store’s address is www.noiia.no

Here are some pictures of sections I want to “compress”.

Best regards,

Pernille // NOIIA

[MandasaTech]

Hello @MPOPernille

How are you doing?

To decrease the padding between section on your page. The only way to edit theme.css file.
If you are familiar you can do it by yourself or you can contact us for help.

Possible solution is:
Admin > Online Store > [CURRENT PUBLISHED THEME] > Edit Code > Assets > Theme.css

Find below code:

@media only screen and (min-width: 750px) {
    .index-section {
      padding-top: 55px;
      padding-bottom: 55px; } 
}

You can reduce top bottom padding, like this:

@media only screen and (min-width: 750px) {
    .index-section {
      padding-top: 30px;
      padding-bottom: 30px; } 
}

Please create a backup of your file before changes.

Thank you!

[MPOPernille]

@MandasaTech Thanks,

I went ahead and tried this, but unfortunately it doesn’t seem to be making a difference. Is there maybe some other lines I can try to edit padding size for?

[MandasaTech]

I can see your change reduced padding for some sections.

But for other section padding are related to banner heights and managed using JS code.
I think trying JS code modification will not be easy for you.
So better to take help from Shopify Expert Team for more help. It will take less than 1 hour.

Thank you!

[MPOPernille]

@MandasaTech Yes, I saw it now! Thanks for the help

Do you by any chance know how to change the padding of the newsletter section, or will this also need a Shopify Theme expert?

[MandasaTech]

Hi @MPOPernille

It’s also in same theme.css file

.newsletter-section {
  padding-top: 55px; }

Try to replace it with

.newsletter-section {
  padding-top: 25px; }

[MPOPernille]

@MandasaTech Thanks, it looks much better now!

Thanks for everything

[AlexandraM93]

@MandasaTech I was hoping I could get some further advice on padding. I am having the opposite problem. There is no spacing at all between my desktop website elements. My mobile view I have fixed. But my desktop view is squished together. My URL is byeheat.com.au

I would appreciate any pointers

Alex