Hi, I’m trying to make my product card images fit into a square container.
For my photography, landscape-oriented images are less than half the size of portrait images.
I’ve tried ChatGPT and the Shopify AI support app, but none of the code modifications they suggested have worked, with maybe 20 different ways to solve it with either CSS or liquid plus CSS. I also searched for solutions here.
Any tips?
I can find classes that allow an effect, but I can’t get the object to contain.
In the UI, I have the card image set to “Aspect ratio: Auto”, but have tried the solutions with square selected in case of some override I’m unaware of.
Cheers
—
1 Like
Thanks for the quick reply. I tried the class .product-media for the first part, which gets us halfway there. Progress, thank you.
I’ve tried .product-media img, product-media__image, and others (plus yours) for the second part, but I can’t get the horizontal images to contain themselves.
I think it’s that second class that’s been escaping all the solutions I’ve found so far.
Image attached showing the CSS update, if that helps.
Thanks again.
P.S., Sorry, I can’t crop my art at this level. I don’t mind doing that for collection covers, though.
This shows the CSS that had an impact. Anything else either had no effect or remained unchanged.
I’ve tried several other free themes, and they all seem the same.
I have a solution (from you). I’ll post it next. I can only attach one image per post.
If I set the UI option to Square and remove the top block of CSS, I get this:
(Well, not this exactly. To make it palatable, I made the grid full screen and lightened the font). Still don’t really like it, but at least art pieces are now the same size.
———
My site is now one, maybe two percent less embarrassing. I’ll take it.
Thanks again for the help.
If you click around Photography – DavidRoberts.Art, you’ll see collections with horizontal and vertical images (affected by the above solutions).
The graphic art collections are mostly square art pieces.
Cheers
1 Like
