Make product cards smaller on collection pages - Palo Alto

[MollieHammond]

Hi All, 

Hope everyone is having a great week. 

We are using the Palo Alto theme and i'm trying to make the product cards in the collection pages a bit smaller, creating a bit more space between them, while keeping 4 in a row on the pages. Ideally the images would be a bit smaller and the text would remain the same size. If anyone could assist me by letting me know how to do this it would be greatly appreciated. 

Website URL: https://www.coffee.prestigerepairs.com.au/collections/manual-coffee-machines

Thank you!

[PaulNewton · Accepted solution]

Hi @MollieHammond 👋 In a custom css setting try the following tailoring the "6" to need

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css

@media only screen and (min-width: 1024px) and (max-width: 1439px) {
  .one-quarter {
    width: calc((var(--wrapper-width) - var(--grid-gutter) * 3) / 6) !important;
  }
}

The !important is because there are 100% rules that are overriding even the actual grid behaviors from classes like .one-quarter

If that can be addressed instead give the collection__products container a custom --grid-gutter value.

[MollieHammond]

That worked PERFECTLY! Thank you so much 🙂

[Dan-From-Ryviu]

Hi @MollieHammond 

Please go to your store admin > Sales channels > Online Store > Themes > Customize > Theme settings > in Custom CSS, paste this code 

@media (min-width: 990px) {
.collection__products .product-grid-item {
    width: 80% !important;
}
}