How to make product cards smaller in collections?

[GoombaGrows]

Please help make my product cards in my collections smaller so they are in similar size to the all products collection. 

the first photo shows how they look right now, the second photo is how I would like them to look. Since they are so big it lowers the quality. 

site: https://goombagrows.com/

[GoombaGrows]

These two products also look big for some reason on the all products page. It looks like shopify is trying to fill the empty space but I do not like that. 

[BiDeal-Discount · Accepted solution]

Hi @GoombaGrows 

Let try to add the Custom CSS below:

@media (min-width: 750px) {
  .product-grid-container ul.grid--4-col-desktop {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
  .product-grid-container ul.grid--4-col-desktop .grid__item {
    width: 100%;
    max-width: 100%;
  }
}

The result will be like:

[GoombaGrows]

This worked! Thank you 🙂

[Mustafa_Ali]

<style>
@media screen and (min-width: 750px) {
    .page-width {
        padding: 0px 20rem;
    }
}
</style>

Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->before the </body> ----->
before the body ----->
if this code work please do not forget to like and mark it solution