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

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/

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; }

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

Thanks

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

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; } }