Issue with section between templates

[ollywebb360]

Can someone please advise, when I add a template section under another on my website a pink bar comes up in-between, I want them sitting flush together. That pink colour is the base theme colour for my website, it happens on every page.

[Samita-Danny]

Hi!

Could you please share your store URL and password (if the store is password-protected) so I can take a look and help you

Thank you!

Samita-Danny

[ollywebb360]

https://pfygr0-ec.myshopify.com/

password is lovebox

[tim_tairli]

The theme has these rules:

Which tells the browser to have a top margin on a section which follows another section.

To override this, go to “Customize”=> “Theme settings” (cog icon)=> “Custom CSS” and paste this:

body {
  --spacing-sections-desktop: 0;
  --spacing-sections-mobile: 0;
}

This will make your sections flush both on mobile and desktop.

This will apply to all sections on all pages, so you need to recheck for unwanted side-effects.

I prefer to set CSS variables like this (if theme uses them) rather then directly modify paddings or margins – often theme uses these variables in other rules, and setting margin directly may affect break the layout.

[Samita-Danny]

@ollywebb360

https://pfygr0-ec.myshopify.com/

Hi

#1 You can copy this custom CSS

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

#2 Open Customize theme → Settings → Custom CSS

#3 Add above CSS to this section

Result

If it works, please react this reply and mark as solution!

Thank you!

Samita-Danny

[ollywebb360]

@Samita-Danny

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

Yes it worked thank you