How can I align the 'add to cart' button due to varying product title lengths?

[Mtgwebshopdk]

Hi,

I am trying to align the add to cart button on my products, which is caused to the diffrent product title lengths.

I have tried diffrent codes, but unsure where to add them?

The theme is vision and the store is

https://pokeplanet.dk/

[niraj_patel]

Hello @Mtgwebshopdk

You can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

.product-card .price { margin-bottom: 20px !important; } .product-card .price+.product-card-title { height: 4rem !important; }

[niraj_patel]

Was my reply helpful? Click Like to let me know!

Thanks

[Mtgwebshopdk]

Hi,

Thank you, this worked on computer, but i still have 2 problems when displayed on mobile.

The Add to cart button in overlapping the product title on mobile, and the items on sale which causes 2 prices to be displayed leads to the add to cart button is unaligned again,

Can you help?

Sincerely

Frederik Lee

[niraj_patel]

You can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

@media screen and (max-width:767px){ .product-card .button{ product:7px 10px !important; } .product-card--content-spacing-true .product-card-info { padding: 10px !important; } .product-card .price { margin-bottom: 20px !important; height: 30px !important; display: flex !important; font-size: 12px !important; } .product-card .price+.product-card-title { height: 5rem !important; font-size: 15px !important; } span.product-card--add-to-cart-text { font-size: 14px !important; } .product-card .badge.top { top: 4px !important; font-size:11px !important; } .badge{ padding:8px !important; } }