dawn theme product grid is all different sizes and i can't figure it out.

[safewatch360]

dawn theme product grid is all different sizes and i can't figure it out.

https://sr1098nzq9otmcut-73389769013.shopifypreview.com

i haven't adjusted any of the css except for section-main-product.css adjusting max width to 50% on .product--large under @media screen and (min-width: 990px) but this isn't used on the product collections.  I also removed "zoom" via custom css but that is the same file as mentioned earlier. 

it's basically the default dawn theme.  95% of all the pics are the same dims.  except for the really big one displayed and it's actually smaller in dims.  yet it's the biggest.  

check any collection on the site.  check under products menu or scroll to bottom of home page.  the grid is all whack.  how can i make it consistent.  not too big, not too small.  i'm googled out on this topic.  HELP!!!

 

[INA_MSWEB · Accepted solution]

Hi @safewatch360 

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the base.css file:
.card__inner {height: 275px;}

.card__media .media img {object-fit: contain !important;}

Regards,

San

[safewatch360]

Worked like a charm!  thank you so much.  that was driving me insane.  

[emmlpop]

Hi,

I also just tried this with my Dawn theme and it worked great to make the pics the same size (thank you!), but it has added some grey space around some pics. Is there a way to resolve that? I'm using two different print-on-demand apps, and their images are different sizes.

.

[ErkenciKus]

did you resolve this?

[edaro27]

Add a white background color to card__inner. The final code should look like this:

.card__inner {
height: 275px;
background-color: white;
}
.card__media .media img {object-fit: contain !important;}

[safewatch360]

thank you!!