A number of my photos are cropped on the product page. Is there some sort of code to have it auto-fit in a portrait size without being cropped? I tried the code recommended here, but it distorted the image.
Thanks in advance!
Hi @aelitzer
Could you share your url store and password? I will help to check it.
there’s not a ton more to see besides the screenshot but it’s https://1ca775.myshopify.com/.
password is labelshopper
Hi,
May I suggest to update code these steps:
- Go to Store Online-> theme → edit code
- Assets/component-card.css
- Add code below to bottom of file
body .card__media .media img {
object-fit: contain;
}
Yes, this did the trick. thank you so much!!
@EBOOST I’m running into the same issue on my home page now. Is there something similar I can add to my homepage to have the same effect? Thank you!
Hi @aelitzer
May I suggest to update code these steps:
- Go to Store Online-> theme → edit code
- Assets/component-card.css
- Add code below to bottom of file
.card__inner { height: 100%;}
Hi @aelitzer
May I suggest to update code these steps:
- Go to Store Online-> theme → edit code
- Assets/base.css
- Add code below to bottom of file
.card__inner.ratio::before {
padding-bottom: 100%;
}
.global-media-settings[style="padding-top: 309.0909090909091%;"]{
padding-bottom: 100%!important;
}
.global-media-settings[style="padding-top: 309.0909090909091%;"] img {
object-fit: contain;
}
Unfortunately that one did not appear to change anything
That’s great thank you!!
Less important, but is there any way to apply a similar code to the product page itself? The photo is quite large https://1ca775.myshopify.com/products/cast-iron-yoga-frog
Hi @aelitzer
Could you adjust like the screenshot?
.global-media-settings[style="padding-top: 309.0909090909091%;"]{
padding-top: 100%!important;
}
That’s perfect - thank you!