Aligning product photos and product name on front page

[questionmark]

Hello!
I have a featured collection -block on the front page (photo of it attached) and my product photos are different sizes. Is there a way to get the cans (and therefore all of the product photos) aligned? Same goes for the product name + price -lines. I would like to force them to always be on the bottom of the product card if possible? Theme in use is Refresh 2.0.

[Dan-From-Ryviu]

Could you share the link to your store?

[questionmark]

https://www.dibaqsense.fi/

[EstherBui]

Hi Questionmark

1. You can try to follow this step for text
   Step 1: Go to Edit code
   Step 2: Find file component-card.css and add this code at the end of the file

.card--card.card--media>.card__content {
   align-items: end;
}

2. As for the images, you should choose images with the same size to improve the positioning.

Best,
Esther

[questionmark]

Hello and thank you Esther!

Unfortunately this code did not fix the headline placement issue. Thank you for helping anyway!

[Dan-From-Ryviu]

Hi @questionmark

Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings

.card .ratio {
    -ratio-percent: 147% !important;
}