Remove the excess space between Image Banner

Shopify Discussion

Topic summary

A user encountered unwanted spacing between two adaptive image banners with black backgrounds on their Shopify store and wanted them to display as a seamless whole picture.

Troubleshooting Process:

  • After sharing the store URL and password, a helper initially suggested adding custom CSS targeting .section-header.shopify-section-group-header-group with margin-bottom: 0
  • The user experienced save errors when applying CSS through the theme customizer
  • The helper then directed them to manually edit the assets/base.css file and add !important to the CSS rule
  • Despite these attempts, the spacing issue persisted

Resolution:

  • After the user provided a specific page URL and screenshot showing the misaligned images, the helper identified the issue was related to section spacing configuration
  • The final working solution was adding this CSS to override default spacing:
main.content-for-layout .section+.section {
    margin-top: 0;
}

Status: Issue resolved successfully. The user confirmed the solution worked and expressed gratitude.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

Both of them are image banner where it has adaptive image so all of the image has a black background is there anyway to conduct of removal since I want it as whole picture

aaaa.png
aaaa.png1914×279 54.6 KB

1 Like
2

hey @NotDems share the URLs of your website plz

3

Hey @NotDems

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

4

Hi @NotDems

Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

5

I hope that you can help me
https://obliqhouseph.com

PW: OBLIQHOUSE

6

Let try to add Custom CSS for theme setting editor :

.section-header.shopify-section-group-header-group {
  margin-bottom: 0;
}
7

Sorry, I’m new here where should I put it?

8

From your shopify admin, choose Sales Channels → Online Store → Themes → click to Customize your current theme, the system will redirect ou to theme editor customize.

at here let do as my attachment below

BiDealDiscount_0-1745804300160.png
BiDealDiscount_0-1745804300160.png1855×934 219 KB

1 Like
9

I keep seeing this whenever I’m saving the css

NotDems_0-1745804971012.png
NotDems_0-1745804971012.png696×113 8.54 KB

10

oh That’s weird

Let come to edit code:

BiDealDiscount_0-1745805446984.png
BiDealDiscount_0-1745805446984.png1543×883 132 KB

then try to add code to the end of assets/base.css file:

BiDealDiscount_1-1745805515003.png
BiDealDiscount_1-1745805515003.png1321×961 118 KB

11

am I doing it right? because as I input the code the problem still occur.

NotDems_0-1745805719586.png
NotDems_0-1745805719586.png747×620 23.3 KB

12

can you change it to this:

.section-header.shopify-section-group-header-group {
    margin-bottom: 0 !important;
}
13

I really appreciate your fast reply can’t thank enough. But I already did it but still no use.

NotDems_0-1745805999418.png
NotDems_0-1745805999418.png640×220 6.09 KB

14

can you screenshot & point out the space on your storefront?

15

This 2 adaptive image must be sync no space needed

NotDems_1-1745806655345.png
NotDems_1-1745806655345.png1250×569 212 KB

16

This 2 adaptive image must be sync no space needed.

NotDems_1-1745806655345.png
NotDems_1-1745806655345.png1250×569 212 KB

17

This 2 adaptive image must be sync no space needed.

See the reference below the link where the image is not align

https://obliqhouseph.com/pages/laser-pecker-4

18

thank you for your providing screenshot.

I think this section have a config for spacing on your theme editor

Screenshot 2025-04-28 at 09.21.00.png
Screenshot 2025-04-28 at 09.21.00.png1826×982 300 KB

you don’t see any config at the right side? if not, we can add a custom CSS to override it:

main.content-for-layout .section+.section {
      margin-top: 0;
  }
1 Like
19

Thank you so much! it works you’re a life saver! Can’t thank you enough

1 Like
20

You’re welcome :hugs:

I’m here to support you if you need any other assistance

1 Like