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

New Member
1 0 0

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 imageCorrect styling - Square image



Additional whitespace between productsAdditional whitespace between products




Incorrect styling - Non-sqaure imageIncorrect styling - Non-sqaure image


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


Thank you for your time.


Shopify Expert
769 100 115

Hello There,

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

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing