How can I decrease the white space between two sections on my Debutify theme?

Topic summary

Goal: reduce large white space between two “Image with text” sections in a Debutify-based Shopify store, with mobile compatibility.

Code-based suggestions:

  • Edit theme.scss.css to adjust section padding via the .box class (e.g., padding-top/bottom: 20px; desktop-only via media query, or padding: 15px). Location: end of theme.scss.css or inside a block before in theme.liquid.
  • General spacing fix: .section + .section { margin: 0 !important; } to remove gaps between adjacent sections.

Outcomes and caveats:

  • Initial .box padding changes didn’t help some users; the adjacent-section rule resolved it for one person.
  • A user noted their issue was different (gap below slideshow), implying different selectors may be needed.

Recent update (no-code option):

  • In the theme editor: Gear (settings) → Layout → “Space between template sections” to control spacing. Screenshots were central to these steps.
  • Availability varies by theme; one Dawn user first saw no effect but later reported success. Symmetry theme lacks this option, requiring CSS edits.

Status: no single universal fix. Action items: try the Layout setting; if unavailable/ineffective, target the correct section classes with CSS and verify on desktop and mobile.

Summarized with AI on December 19. AI used: gpt-5.

This is my Shopify developer store created by the Debutify theme.

Link - https://uniquestoreall.myshopify.com/
Psw - 1234

There are two “Image with text sections” before the footer section. I want to reduce the white space between those two sections. But unable to do it. If anyone does it for me by inspecting elements, I will be grateful to him.
Make sure perfect for mobile devices.

@Mukta_92 - please add this css to the very end of your theme.scss.css file, I will reduce spacing on homepage, change no. 20 as per your need

@media screen and (min-width: 769.1px){
.box {padding-top: 20px;    padding-bottom: 20px;}
}
1 Like

Hi @Mukta_92 , go to theme.scss.css and add the following code :

.box {
    padding-top: 20px !important;
    padding-bottom: 60px;
}
1 Like

Hi @Mukta_92 ,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file → Save


Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

Hello @Mukta_92 ,

I understand you are looking to reduce the space between two section(Image with text sections)

Please follow the below mentioned steps to implement this change-:

  1. Go to Online Store → Themes-> click on 3 dots → Edit code.

  2. Search for the theme.liquid file and open it.

  3. Now paste the below mentioned code at the bottom of this file before tag

.box { padding: 15px; }
  1. Save changes.

Output will look like this -: https://prnt.sc/b98HXsvyP1Hn

Please feel free to change the padding pixel size as per your requirements.

Kindly let me know if you need any assistance.

I look forward to your response.

Hello I can’t seem to remove this space o n my home page with the all the answers from this thread … :confused:

@cptstoa - please share this page link

Hi, thanks i already found the solution :wink:

can you share how you solved it? I’m dealing with the same issue.

insert this in your them.liquid

}
.section + .section {
margin: 0 !important;
}

Tnx, but it didn’t work

I think I’m having a different problem with the white space below the slideshow.

If you are still looking for how to do this, there is now an easier way. Follow these steps:

  1. Select the gear on the left side

  1. Select Layout
![Screenshot 2024-07-07 at 4.51.23 PM.png|624x874](upload://xrARDyNjVO63MSnsPwejRwRIN0s.png)
  1. Select Space between template sections
![Screenshot 2024-07-07 at 4.51.31 PM.png|602x172](upload://aEfqVfC3rH5VmOadgawrZOukvno.png)
1 Like

Having the same issue on my Dawn theme but this did not change the margins at all, could you please help? https://community.shopify.com/post/2664427

I LOVE YOU … thank you! Have been struggling with this all day haha

Darn, I sure wish this option was in the theme we’re using (Symmetry). I want to make this change also and I’d really rather not edit the .css file.