How to remove margins in custom liquid blocks

Store Design
,
1

Hello. I have several custom liquid block in my theme (Sense 2.0).

For some reason certain custom liquid blocks have a margin, while others don’t. I tried adding css styles to remove it by targeting the block id#, but this is not fun and actually does not always work.

Does anyone know what causes the margin to be added to certain custom liquid blocks? What would be the best way to handle (remove) them?

link: https://feelbrill.lt/

Image 26-06-2025 at 16.04.jpg
Image 26-06-2025 at 16.04.jpg2490×1746 538 KB

2

Hi,

Hope this will help

  • Find file that contains CSS, like base.css, theme.css, or custom.css. and add the css

CSS example

.shopify-block--custom-liquid {
  margin: 0 !important;
  padding: 0 !important;
}
1 Like
3

@FeelBrill please open your page in customize settings and check if you can remove the extra section on this page

1 Like
4

Hi @FeelBrill ,

There is an adjacent sibling selector which will apply margin to any .section that follows another .section which includes the custom liquid section.

You might be able to remove it from base.css and then use the theme editor to add padding to sections instead (If the padding option is in your theme).

Otherwise for every custom liquid section you could add some CSS, as an example.

#shopify-section-sections--24912919757141__custom_liquid_7FHUbi
 {
        margin-top: 0px !important;
 }

Hope that helps,
Jake

1 Like
5

It was already suggested that there is a special CSS rule which adds top margin to every section which immediately follows another section.

You can override this.

Paste this into your “Theme settings”=> “Custom CSS”

section[id*=custom_liquid] {
  margin: 0 !important;
}

Or you can add it into your .. in your custom liquid section.

2 Likes