A user is experiencing image cropping issues on mobile devices when customers click to enlarge product photos with a 9:16 aspect ratio. They want to change the aspect ratio to 1:1 in the Dawn theme (v15.2.0).
Proposed Solutions:
object-fit: cover or width/height propertiesCurrent Status:
The original poster is uncertain about code placement, asking where to insert the provided CSS within their existing custom CSS file that only contains a .card border-radius rule. The discussion remains open with no confirmed resolution yet.
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
