I’ve just discovered that my product photos are the optimum aspect ratio for viewing on mobile devices. All of my product photos are 9:16 which is fine until you click on an image to see it larger; then the image is cropped.
How do I change the aspect ratio to 1:1? I’m running Dawn v. 15.2.0. My website address is HoneyBrookTools.com
Hi @Will_HoneyBrook ,
Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.
@media (max-width: 768px){
.product-media-modal__content .global-media-settings {
object-fit: cover !important;
width: 100% !important;
}
}
add this in your base.css or your custom css file
@media screen and (max-width:750px){
img.product__media-item–variant.active{
width: 100%;
height: auto;
}
}
For products on the collection page, it has the option to change the Image ratio in Sales channels > Online Store > Themes > Customize > Collections > Default collection.
Hi-
When I go to theme settings the only thing I see is “Custom CSS” and the code there is:
border:radius 30px
}
Is this where I should insert the code you provided?
Hi-
When I look at the Custom CSS in theme settings I see the following code:
border:radius 30px
}
Where within this code to a copy the code you provided? I assume right before .card as that is the only place I can place my cursor.
Thanks!
Will
