How to change the aspect image ratio of the product card on the collection on Dawn theme?

Solved
waterwalker
New Member
3 0 0

How to change the aspect "portrait" image ratio of the product card on the collection on Dawn theme?

When I select "portrait", the ratio sets with 2:3. But I would like to have the image ratio 9:16 instead of 2:3 on the collection page when I select "portrait" in the 3 options. The ratio of 2:3 is fitting with most of my product images. 

I don't want to select "adapt to image" for a certain purpose. I would like to change the aspect "portrait" image ratio.

Screen Shot 2021-11-15 at 12.07.18 AM.png

Accepted Solution (1)

Accepted Solutions
PaulNewton
Shopify Partner
3387 219 646

This is an accepted solution.

Always backup themes and files before making changes

You'll need to either modify the class .media--portrait in base.css so it's the appropriate percentage.

Or modify the aspect ratio padding calculation in snippets/product-card.liquid around line 75.

 

The padding trick is a CSS method to normalize image aspect ratios.

https://css-tricks.com/aspect-ratio-boxes/ 

https://tippingpoint.dev/css-aspect-ratio 

https://web.dev/aspect-ratio/  

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com

View solution in original post

Replies 3 (3)
PaulNewton
Shopify Partner
3387 219 646

This is an accepted solution.

Always backup themes and files before making changes

You'll need to either modify the class .media--portrait in base.css so it's the appropriate percentage.

Or modify the aspect ratio padding calculation in snippets/product-card.liquid around line 75.

 

The padding trick is a CSS method to normalize image aspect ratios.

https://css-tricks.com/aspect-ratio-boxes/ 

https://tippingpoint.dev/css-aspect-ratio 

https://web.dev/aspect-ratio/  

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com

View solution in original post

waterwalker
New Member
3 0 0

Thanks a lot, PaulNewton!

Sorry, I misunderstood. Most of the ratio of my pictures is 2:3, not 9:16. 

Although most of the ratio of my product images are 2:3 and I select "portrait" at an image ratio such as 2:3 but the images on my computer screen are a little bit cut off on the collection( you can see it on my screenshot). When I select "adapt to image", it looks fine. The image ratio must be 2:3 just as in original pictures. But when I select "portrait", it seems like not 2:3. The image is a bit cut off. 

I don't know what is wrong? 

The problem is I need to select "portrait" for a certain purpose. I want to present all the pictures(a ratio of 2:3) on a collection without cutting them off when I select "portrait".

Can you help me?

 

 

portrait (ratio 2:3)portrait (ratio 2:3)adapt to image (original image ratio 2:3)adapt to image (original image ratio 2:3)

waterwalker
New Member
3 0 0

I fixed it.

 

You'll need to either modify the class .media--portrait in base.css so it's the appropriate percentage.

 

 

line 1137    .media--portrait { padding-bottom: 125%;}

 

 

With this aspect ratio of 2:3, the height is 1.5 times longer than the width. It means 150%, not 125%.

It is said, the ratio of the portrait on the Dawn manual is 2:3. But actually not. It must be an error. 

 

So I changed like this.

 

 

    .media--portrait {padding-bottom: 150%;}

 

Now it works perfectly.