White space on collection pages (mobile view) as a result of non-sqaure images!

Technical Q&A
1

Hi there!

I’m looking for some guidance with removing some white space on my store (Supply Theme). I need to style my collection page (mobile only - desktop wouldn’t look right) so that the product title/price/sale amount is brought underneath the image regardless of it’s shape. Currently it looks fine if the image displayed is square, however anything other than that creates white space, presumably because the image is within some kind of container? (I have extremely limited coding knowledge so this may be completely wrong!). Please see screenshots below:

Correct styling - Square image
Correct styling - Square image550×697 156 KB

Additional whitespace between products
Additional whitespace between products497×702 133 KB

Incorrect styling - Non-sqaure image
Incorrect styling - Non-sqaure image523×498 98.2 KB

If anyone could help, I’d really appreciate it.

Thank you for your time.

2

Hello There,

Please share your store URL.
So that I will check and let you know the exact solution here.

3

Hi Pallavi.

I have since changed theme so I no longer have this issue. Thank you.

I do have another issue I’m trying to resolve on my latest theme if you could take a look?