How can I remove the vertical margin between sections ?

[LothaireBordeau]

Hello,

On my website, www.lothaire.fr, there's vertical padding between every section (here pictured with the pink arrow). For example between the header and the "Nouveautés" section. Do you know how I can reduce its size or delete it ? 

[niraj_patel · Accepted solution]

Hello @LothaireBordeau 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  .index-section {
       margin: 0 !important;
   }
   .section--divider {
       padding-top: 24px !important;
    }
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[niraj_patel · Accepted solution]

Hello @LothaireBordeau 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  .index-section {
       margin: 0 !important;
   }
   .section--divider {
       padding-top: 24px !important;
    }
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[LothaireBordeau]

Thanks, it helped a lot. 

The website now looks much better, except the last section at the bottom, "toutes nos boutiques". 

Is there anyway to keep a margin just for that section ? 

[niraj_patel]

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
 .main-content {
    min- height: 500px !important; /*adjust according to you*/
  }
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark my both solutions as an Accepted Solution.

[LothaireBordeau]

That's not what I meant. I didn't mean the page itself. I meant the section on the homepage. 

I have successfully deleted all top margin but this one I wish I had kept.

[niraj_patel · Accepted solution]

Ok understand

Add this

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  div#shopify-section-template--23131461255493__16621066624b4c4f3e {
      margin: 50px 0 !important; /*adjust according to you*/
  }
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[LothaireBordeau]

It worked, thank you !

[LothaireBordeau]

Hello ! I'm sorry but I need your help again since you were so good last time. Thanks to you, Homepage looks good now, but all other pages look cramped. This one for example : https://www.lothaire.fr/pages/boutique-lothaire-bergerac-1

Do you know how I can have the spacing back on all pages ? (Except the ugly one on the homepage that you helped me get rid of). 

[Moeed]

Hey @LothaireBordeau 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.index-section {
    margin: 0 !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[BSSCommerce-HDL]

H @LothaireBordeau, 

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

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
    .index-section {
        margin: 0 !important;
    }
</style>

Here is result:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍