Dawn Theme - How to change the gaps in between sections?

Dawn Theme - How to change the gaps in between sections?

VinceLegentil
Tourist
8 0 0

Store URL - https://maisoncreations.com/

 

What's the best way to change the height in between each section on the main page?Screenshot 2023-12-30 142853.png

Replies 2 (2)

Samia_Akram22
Shopify Partner
60 10 15

@VinceLegentil  if you want to change the height in between sections overall.Add the following code to your base.css class and adjust the height according to your need in between the sections:
<style>
[id^="Shopify-section"] {
margin-bottom: 40px !important; /* Adjust the height here */
}
</style>
but if you want to add this styling only on the home page then you will add the following code including with the javascript code a bit.
document.addEventListener('DOMContentLoaded', function() {
// Check if the current page is the homepage
if (window.location.pathname === '/') {
// Add a class to the body element if it's the homepage
document.body.classList.add('homepage');
}
});

<style>
body.homepage [id^="shopify-section"] {
margin-bottom: 40px !important;/* Adjust the height here */
}

</style>
Hope this helps.Thanks


 

 

Problem Solved? ✔Accept and Like solutions to help future merchants.
VinceLegentil
Tourist
8 0 0

Thank you for your reply!

Sadly both suggestions are not working. Can you suggest what I'm doing wrong?

 

Thank you so much for your help!