Line up Product titles, prices and vendor on collection page - debut theme

Highlighted
Tourist
6 0 1

I want to make it so the titles, price and vendor all appear lined up horizontally regardless of image size or title length

 

title not lined uptitle not lined upprice and vendor not lined upprice and vendor not lined up

0 Likes
Highlighted
Shopify Partner
3156 689 839

@msodh7 

Please share your website URL. I will check and provide a solution here.

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Tourist
6 0 1
Highlighted
Shopify Partner
3156 689 839

@msodh7 

I have to find all URLs. Can you please provide me above 2 screenshot's URLs so I can check?

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Highlighted
Shopify Partner
3156 689 839

@msodh7 

Please add the following code at the bottom of your assets/theme.css file

.template-collection .product-card__title {
display: block !important;
min-height:50px;
}
.template-collection .grid-view-item__image-wrapper{
min-hieght: 352px;
}

 

Hope this works for you.

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Tourist
6 0 1

ive added it but it doesnt appear to have changed anything.

0 Likes
Highlighted
Shopify Partner
3156 689 839

@msodh7 

Sorry, it was my mistake. Here is a new code to remove the old one.

.template-collection .product-card__title {
display: block !important;
min-height:50px;
}
.template-collection .grid-view-item__image-wrapper{
min-height: 352px;
}

 

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Tourist
6 0 1

thanks that appears to have worked for desktop but now mobile doesnt look correct its added loads of spacing. 

spanksymobile.png

0 Likes
Highlighted
Shopify Partner
3156 689 839

@msodh7 

Please add the following code for the mobile. You can adjust min-height as per your need.

@media only screen and (max-width: 749px) { 
.template-collection .grid-view-item__image-wrapper{ min-height:182px; }
.template-collection .product-card__title { min-height: 70px; }
}

 

Hope this helps.

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes