How can I remove extra padding on mobile above my collection?

Store Design
1

I need help removing extra padding on mobile above my collection.

2

Hi @ericsoho ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css->paste below code at the bottom of the file:
@media (max-width: 749px) {
    #shopify-section-template--15250155208910__banner .collection-hero {
       display: none !important;
    }
    #section-template--15250155208910__product-grid-padding {
       padding-top: 0 !important;
    }
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

3

It did take away some padding, but I would like it to take away more.

4

Hi @ericsoho ,

You try add more below code in base.css file:

@media (max-width: 749px) {
    #product-grid .ratio:before {
        padding-bottom: 74% !important;
    }
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

5

Didn’t change the padding between header, only products.