Need help vertically aligning product names in collection lists

Solved
kazman23
Tourist
9 0 1

Hello,

 

We need some help vertically aligning the text - specifically the product names - in our collection lists. Right now, this is what the formatting is like:

 

pic of site.png

 

We would like to have the text all align to the top by default, similar to the 3rd item in the screenshot above. If possible, we'd also like for the prices' alignment to stay consistent as well.

 

I quickly made an edit on Photoshop to show what exactly we'd like it to look like:

 

pic of site edited.png

 

The theme we are using is called "Venture" and the URL for the site is:

 

https://spoiled-rotten-lifestyle.myshopify.com/

 

Any help would be greatly appreciated, thanks!

 

 

 

 

 

0 Likes
Alex_Lam
Shopify Partner
87 29 23

This is an accepted solution.

.product-card__info {
    position: inherit;
}

.product-card__image-container {
    margin-bottom: 0px;
}

This code should make the product titles align to top!

Is your store fast enough? Compare your store's speed against hundreds of others for free with our benchmarker - https://www.rvere.com/
0 Likes
kazman23
Tourist
9 0 1

Hey,

 

Thanks a lot for the reply but I'm not sure which file I'm supposed to add the code to! I'm a little overwhelmed and just thinking of attempting trial and error at this point

0 Likes
kazman23
Tourist
9 0 1

For anyone wondering, the code above goes in your theme.scss.liquid file at the very bottom! The code did do what I asked but introduced other problems so we decided to not use it.

cniculescu
New Member
1 0 0

If you want a border around the product-card, it breaks the consistent height. 

I'd be curious if anyone else comes up with a better idea (I was trying the vertical-align property, but that does not seem to solve it). 

0 Likes