How to remove the white gap between the product collection and the image banner?

Shopify Discussion

Topic summary

Removing a persistent white gap between a product collection section and an image banner in a Shopify theme. Padding set to 0 still left a small space on pages mixing “product grid” and “featured products” sections.

Proposed fixes focused on CSS (theme asset files like base.css/main.css):

  • Targeting a specific Featured Collection slider with a selector (ul#Slider-template-… { margin-top: 0 !important; }) removed the gap for one section only.
  • A broader rule for product grids (.grid.product-grid.contains-card.grid–4-col-desktop.grid–2-col-tablet-down { margin-top: 0; }) was suggested, added at the bottom of the CSS file via Online Store > Themes > Assets.

Outcome: The poster applied CSS per featured collection/section, and the gap was removed. Issue appears resolved.

Context/clarifications:

  • “Featured products/collection” and “product grid” are different section types; selectors must match each section’s HTML structure.
  • CSS (Cascading Style Sheets) margin-top controls space above elements; overriding it eliminates the gap.
  • Screenshots were provided to show before/after results but are not required to implement the fix.

Status: Resolved, no remaining questions reported.

Summarized with AI on December 24. AI used: gpt-5.
1

Hi there, i need help to remove the white gap between the product collection and the image banner. I have set the product collection and the image banner to 0 padding however, there is a slight gap?

*NOTE - Some collections are product grid and some are featured products.

Screenshot 2024-07-19 at 16.38.31.png
Screenshot 2024-07-19 at 16.38.31.png2880Ă—1606 681 KB

1 Like
2

Add this code in your base.css file:

ul#Slider-template--16107583537391__featured_collection_EG6U6r {
  margin-top: 0px !important;
}

Result:

Spaces_0-1721404441769.png
Spaces_0-1721404441769.png1437Ă—412 342 KB

3

Hi @crepscity

Which collection is this? Thanks!

4

This code only worked for one section in this collection: https://crepscity.com/collections/louis-vuitton-jackets-1

but there are other featured collections within that collection and did not trigger them.

5

Hi Made4uo.

this collection: https://crepscity.com/collections/louis-vuitton-jackets-1

6

Thanks for the info, check this one.

  1. From you Admin page, go to Online Store > Themes
  2. Select the theme you want to edit
  3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  4. Then place the code below at the very bottom of the file.
.grid.product-grid.contains-card.grid--4-col-desktop.grid--2-col-tablet-down {
   margin-top: 0px;
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

2 Likes
7

I inserted it to each featured collection into the css therefore, it worked thank you.