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!
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.
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;
}
}
That worked PERFECTLY! Thank you so much 
