Change Aspect Ratio for Product Photos in Dawn Theme

[Will_HoneyBrook]

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

[CodingFifty]

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;
}
}

[Will_HoneyBrook]

Hi-

When I go to theme settings the only thing I see is "Custom CSS" and the code there is:

1.      .card. {

               border:radius 30px

          }

Is this where I should insert the code you provided?

[SafeerAhmed]

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;

}

}

[Will_HoneyBrook]

Hi-

When I look at the Custom CSS in theme settings I see the following code:

1.      .card. {

               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

[Dan-From-Ryviu]

Hi @Will_HoneyBrook 

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.