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

[Mukta_92]

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.

[suyash1 · Accepted solution]

@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;}
}

[suyash1 · Accepted solution]

@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;}
}

[Abdosamer · Accepted solution]

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

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

[PageFly-Oliver]

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

<style>
.box{
padding:10px 0 !important
}
</style>

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

[Anshul_arora]

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 </body> tag

<style>

.box {
padding: 15px;
}

</style>

4. 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.

[cptstoa]

Hello I can't seem to remove this space o n my home page with the all the answers from this thread ... 😕

[suyash1]

@cptstoa - please share this page link

[cptstoa]

Hi, thanks i already found the solution 😉

[sharonasyam]

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

[cptstoa]

insert this in your them.liquid

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

[sharonasyam]

Tnx, but it didn't work

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

[theparmesan_don]

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/c/shopify-design/remove-white-space-margin-in-featured-collection-sect...

[ForTheMasses]

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

2. Select Layout

3. Select Space between template sections

[theparmesan_don]

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

[starrlightmedia]

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.