Force product images to be square - product page

[Boat]

Hello everyone

How can I force product media (pictures) to be displayed in a square frame in product page?

Just as I can choose to display pictures as square when viewed rows in the collections, I'd like the main image to always be square when in product page. I hope this is clear. 😄

I am cool with coding, using Dawn, https://by-lovisa.myshopify.com 

PW: lovisabest

Thank you!

[made4Uo]

Hi @Boat 

Thank you for providing your website. You can try the following instructions to make your images square in your product pages. 

1. From your Admin Page, click Online Store > Themes >Actions > Edit code
2. In the Asset folder, open the base.css
3. Paste the code below at the very bottom of the file.

.product__media.media.media--transparent.gradient.global-media-settings {
    aspect-ratio: 1;
}

[Boat]

Thank you @made4Uo it is aaaalmost perfect. The Images however are now huge and float over the product description. I also tried to change the setting to "small",  they were medium before.
So they need to have a fixed max width I guess. 

[Boat]

oop no I tried to fiddle with the width, I did not work ☹️

[made4Uo]

Hi @Boat 

You should be able to change the width of the image in dawn using the theme editor. 

1. From your Admin Page, click Online Store > Themes > Customize
2. Go to your product page and click the Product Information
3. Change the Desktop media size to small or medium

If the issue still persist. I think you might have added a custom code before. Try the code below instead

1. From your Admin Page, click Online Store > Themes >Actions > Edit code
2. In the Asset folder, open the base.css
3. Paste the code below at the very bottom of the file.

@media screen and (min-width: 990px) {
.product .grid__item.product__media-wrapper {
    max-width: 40%;
}
}

[Jevgenij]

Hi! How about Sense theme ? ;/