How to reduce the spacing between sections?

[LSAccounting]

I am looking to reduce the spacing between each section as when I add sections the spacing seems pretty major. I can't see an option for that in customise. Any other way this can be done? 

TIA 

Spark Theme

[PageFly-Kate · Accepted solution]

Hi @LSAccounting ,

This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/theme.css->paste below code at the bottom of the file:

.template-page .main #shopify-section-template--16721685020897__346ac8aa-f653-448a-a98f-4de6c539d5e9 ~ .shopify-section .section {
    margin: 60px 0 !important;
}

I hope it would help you
Best regards,

Kate | PageFly

[oscprofessional]

@LSAccounting 

share the URL please

[LSAccounting]

@oscprofessional 

https://www.lsaccountingfirm.com/

[oscprofessional]

@LSAccounting ,

.collection-list.collection-list--columns-3.section {
    margin: 15px;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid

[LSAccounting]

@oscprofessional 

I could only see the difference using this code when it came to Collections List on my Home Page and other pages which contain that section. 

Unfortunately, I am looking for a code that will reduce spacing between all sections and not just one type. As the page I needed it for which is in the screenshot - did not change. I am also only really looking to have it applied to this page only. 

[PageFly-Kate · Accepted solution]

Hi @LSAccounting ,

This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/theme.css->paste below code at the bottom of the file:

.template-page .main #shopify-section-template--16721685020897__346ac8aa-f653-448a-a98f-4de6c539d5e9 ~ .shopify-section .section {
    margin: 60px 0 !important;
}

I hope it would help you
Best regards,

Kate | PageFly

[LSAccounting]

@PageFly-Kate 

Perfect! 

Is there a way of using this on other of my pages? i.e., changing the section template numbers in the code that you have used? Where have you found it? 

thank you!

[GemPages · Accepted solution]

Hello @LSAccounting 

I would like to give you the recommendation to support you so kindly follow steps below:

1. Go to your Online store > Themes > Edit code
2. Open your theme.liquid file
3. Paste the below code before </body>

<style>
.section,.page{
margin:30px 0 !important;
}
</style>

I hope the above is useful to you.
Best regards,
GemPages Support Team

[LSAccounting]

@GemPages 

Thank you! It did work. However, a bit too much. It was too close together and even when playing about with the margin numbers in your code, I wasn't seeing a difference in trying to make the gap a bit bigger. 

I would have used your solution if I have not of found one that fits my page better. 

Thank you!

[Subble]

if the gap is too much you just need to change the size. 

To change the size you change the numbers. For example in the code they gave you they used 30px. 

If you want it smaller change it to 10px, or even 0px for no gap.

[jasonpurdy]

this worked for me, thanks! 

[Topgaus]

Hi Everyone, none of these methods work for me... Can someone please help

[vanessaarroyo]

Hi! I'm wondering if you resolved this issue? I'm encountering the same situation and the below replies didn't do anything. Thank you! 

[LSAccounting]

@vanessaarroyo , Hi! How did you get on with it? 

2 of the above have worked for me. Although 1 better than the other. 

Read the comments I've put under each comment if you want to find out how they worked 😊