Remove spaces between sections - theme "sense"

voguance · ‎03-04-2024

Hi everyone!

I'm having a super hard time removing the extra spaces between the sections (here: highlighted in yellow) throughout my shop.

I already contacted the support and they told me they can't do anything for me. I already tried to use the codes I can find on the internet but it's not working. Help please!! 🆘

ThePrimeWeb · ‎03-04-2024

Hey @voguance,

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
section.shopify-section.section {
    margin-top: 0 !important;
}

section.shopify-section.section > div > div {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
}

.banner__content.banner__content--middle-center.page-width.scroll-trigger.animate--slide-in:has(div:empty) {
    display: none !important;
}
</style>

Screenshot is for reference only, the correct code to paste is the one shown above.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

ThePrimeWeb · ‎03-04-2024

Hey @voguance,

Can you share the link to your store? Thanks!

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

voguance · ‎03-04-2024

Hi, yes. It's www.voguance.com.

It seems to be a problem coming from the theme I'm using 😞

ThePrimeWeb · ‎03-04-2024

Hey @voguance,

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
section.shopify-section.section {
    margin-top: 0 !important;
}

section.shopify-section.section > div > div {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
}

.banner__content.banner__content--middle-center.page-width.scroll-trigger.animate--slide-in:has(div:empty) {
    display: none !important;
}
</style>

Screenshot is for reference only, the correct code to paste is the one shown above.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

voguance · ‎03-04-2024

Ohhh thank you SO MUCH! 🙏 it worked!

voguance · ‎03-04-2024

Now looking at the mobile view I can see there's an issue with all the pictures 😥

Is there something I can add in the code to fix this? Because using the regular settings doesn't work unfortunately

Remove spaces between sections - theme "sense"