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

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:

(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!

@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;
}
}