Product Card Sizing Issues In Certain Collections

Technical Q&A
, , ,
1

In certain collections on our product page the product cards do not resize correctly. If there are 5 products in the collection it is fine, but if there are less than 5 products the cards get smaller. 1 product in a collection will show super tiny, 2 is a little bigger, 4 is almost correct. This happened after implementing a code to push down out of stock products. I cannot seem to find the correct code to resize collects product grids with fewer than 5 products. Adjusting the number of columns will help resize them.

Link to a page that wont size correctly

Logo Download – Five Three Titanium LLC

Thank you

2

Hello @Kherve24

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
ul#product-grid {
display: block;
}

devcoders_0-1743790292211.png
devcoders_0-1743790292211.png1138×617 47.8 KB

3

Hey,

When I put that code in, everything sizes correctly but causes everything to fall into one vertical column. I forgot, when I implemented the code to push down out of stock, it caused ne to loose the hover shows second image effect so I had to add some code in to make that work again.

4

What about this then?

.product-grid {
  width: 100%;
}
5

That worked! Sometimes its the simple solutions. Thank you!