Debut - Collection Grid - Fixed Product Image Height/Vertically Align Product Title

Solved
Tourist
4 0 3

I'm sure I'm not the first to ask, but I'll be darned if I can find this answer.

The Debut theme displays the product image cards with the product title at variable heights (depending on the image) which LooKS reALly wOnKy.

How can I fix the product image height so that the product titles will be vertically aligned like nice.. little.. ducks.. in.. a.. row...?

 

Sharron2_1-1606410942789.png

 

 

Hi,
Please share your store URL , So I will give you proper solution here !

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Shopify Partner
11981 1478 4336

Hello, @Sharron2 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Tourist
4 0 3

xxxxx

0 Likes
Shopify Partner
11981 1478 4336

This is an accepted solution.

@Sharron2 

Thanks for store URL

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css.liquid->paste below code at the bottom of the file.

.product-card__image-with-placeholder-wrapper {height: 280px;}
.grid-view-item__image-wrapper {max-width: 100% !important;}
.grid-view-item__image-wrapper div {padding-top: 100% !important;}
.grid-view-item__image-wrapper .grid-view-item__image {max-width: 100% !important; max-height: 100% !important; object-fit: contain;}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Tourist
4 0 3

@KetanKumar Well, you just made my day. That works perfectly! Thank you so much; I'll reach out by email if we have any other tweaks we need.

thank you.jpg

 

Shopify Partner
11981 1478 4336

@Sharron2 

Thanks for update and support.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes