Need help getting product grid tiles text/pricing to align on the bottom

Store Design
,
1

My images are different sizes and so the text is jumping around. Is there a way to make sure the text aligns to the bottom? My theme is craft and my link is:

https://d2aa1a.myshopify.com/collections/art-1

I’ve tried to copy code from other similar postings and solutions but nothing changed. I am not sure if I am using the right code or pasting it properly. I know nothing about code.

Thanks for any help in advance!

2

Hi @cobalthouse

You can do that by adding this CSS code to theme.liquid file before tag in Online store > Theme > Edit code

Screenshot 2023-09-26 at 10.39.42.png
Screenshot 2023-09-26 at 10.39.42.png1540×820 227 KB

3

Hi @cobalthouse ,

This is David at SalesHunterThemes.

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code.

Go Assets folder → base.css file.

Add this following code at the bottom of page.

.card__information {
    display: flex !important;
    align-items: end !important;
}

result:

David_SHT_1-1695699783310.png
David_SHT_1-1695699783310.png2478×2386 798 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

David | SalesHunterThemes team

4

Hello @cobalthouse :waving_hand:

Inside Shopify Admin, you can go to Edit theme code, open file base.css and add this code at the bottom

.card__information {
    display: flex;
    flex-direction: column;
    justify-content: end;
}

The result

Screenshot 2023-09-26 at 10.48.18.png
Screenshot 2023-09-26 at 10.48.18.png1948×686 194 KB

Hope that helps!

5

Hi @cobalthouse

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the base.css file:

.card__content {display: flex; justify-content: end; align-items: end; flex-direction: column;}

Regards,

San

6

Hello,

Thank you for your help. When I pasted this code, I did get the text to the bottom, but the format changed and it added additional text to the center of the photo, so there is double text. Do you know what could have caused this? See the result here:

https://admin.shopify.com/store/d2aa1a/themes/160970211636/editor?previewPath=%2Fcollections%2Fart-1&picker=resource

7

Hello David,

Thank you for your help. When I pasted this code, I did get the text to the bottom, but the format changed and it added additional text to the center of the photo, so there is double text. Do you know what could have caused this? See the result here: https://d2aa1a.myshopify.com/collections/art-1

8

This worked!!! Thank you! Looks so much better. :slightly_smiling_face:

9

Great! You are welcome.