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

Solved

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

Mukta_92
Shopify Partner
27 0 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.

 

ScreenETFDRDshot_1.jpg

DebutifyThemeExpert
Accepted Solutions (2)

suyash1
Shopify Partner
10000 1241 1579

This is an 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;}
}
Amazing chess game | To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.

View solution in original post

Abdosamer
Shopify Partner
919 171 191

This is an accepted solution.

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

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

 

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
My work

View solution in original post

Replies 14 (14)

suyash1
Shopify Partner
10000 1241 1579

This is an 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;}
}
Amazing chess game | To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.

Abdosamer
Shopify Partner
919 171 191

This is an accepted solution.

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

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

 

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
My work

PageFly-Oliver
Shopify Partner
878 190 182

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Anshul_arora
Navigator
453 128 98

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.

 

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here
cptstoa
Tourist
10 0 0

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

 

Screenshot 2024-03-25 at 09.12.32.png

suyash1
Shopify Partner
10000 1241 1579

@cptstoa - please share this page link

Amazing chess game | To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
cptstoa
Tourist
10 0 0

Hi, thanks i already found the solution 😉

sharonasyam
Visitor
2 0 0

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

cptstoa
Tourist
10 0 0

insert this in your them.liquid

 

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

sharonasyam
Visitor
2 0 0

Tnx, but it didn't work

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

theparmesan_don
Excursionist
20 1 7

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
Visitor
1 0 1

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

Screenshot 2024-07-07 at 4.51.14 PM.png

 

 

 

 

 

 

 

 

 

2. Select Layout

Screenshot 2024-07-07 at 4.51.23 PM.png

 

 

 

 

 

 

 

 

 

3. Select Space between template sections

Screenshot 2024-07-07 at 4.51.31 PM.png

theparmesan_don
Excursionist
20 1 7

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

starrlightmedia
New Member
7 0 0

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.