How can I get rid of this large gap between my collection banner image and the product grid?

Store Design
, ,

Topic summary

A user is experiencing an unwanted large vertical gap between their collection banner image and the product grid on their Shopify store. They’ve outlined the problematic spacing in a screenshot.

Issue Details:

  • The gap appears below the collection banner image
  • Desired spacing: 10-20px maximum between banner and product grid
  • Affects the collection page layout

Proposed Solution:
A CSS fix was provided involving:

  • Navigate to: Online Store → Theme → Edit code
  • Location: Asset → base.css
  • Add custom CSS targeting the specific product grid section with negative top margin (-60px) within a media query (min-width: 768px)

Status: The original poster noted in an edit that they resolved the issue immediately after posting, though the specific solution they used wasn’t detailed. The CSS recommendation remains available as an alternative approach for similar spacing issues.

Summarized with AI on November 25. AI used: claude-sonnet-4-5-20250929.
1

Hello!

I’ve been trying to troubleshoot this for a while now and can’t figure out what’s causing it.

There’s this large gap as seen in the screenshot here outlined in pink/purple:

brendaanne3_0-1668110818676.png
brendaanne3_0-1668110818676.png1608×1065 198 KB

(https://codiworldwide.com/collections/apple-cases)

I’d like the product grid to be max 10-20px below the banner image.

Any tips?

EDIT: As soon as I posted this I was finally able to figure it out!

1 Like
2

@brendaanne3

yes, please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css ->paste below code at the bottom of the file.
@media (min-width: 768px) {
#shopify-section-template--15991330603221__product-grid {
    margin-top: -60px;
}
}