Add to Cart Buttons not-justified

Site URL: https://www.owltearooms.co.uk/online-shop

Hello,

I'd like to justify and align the 'Add to Cart' buttons so they are the same horizontal rule, this is because some of the titles of the products are longer which pushes the button down, please see the attached image.

I'd like to know if there's some code which I can use to align the add to cart buttons?

Thanks.

Add to Home > Design > Custom CSS

@media screen and (min-width:641px) {
.product-block .productDetails .product-title {
    min-height: 40px;
}
}

Thank you @tuanphan

@tuanphanI used code above to successfully create space between product title and description, but I'm hoping to align buttons at base (the "add to cart" to be bottom justified). My buttons vary due to some item descriptions being longer then others (1 vs 2 lines of description copy bumps the button out of alignment). Can you help w/ coding?

Site: hrdripbar.squarespace.com/dripcocktails
Password: Dripbar21

On 5/18/2021 at 5:23 AM, ColeH_design said:

@tuanphanI used code above to successfully create space between product title and description, but I'm hoping to align buttons at base (the "add to cart" to be bottom justified). My buttons vary due to some item descriptions being longer then others (1 vs 2 lines of description copy bumps the button out of alignment). Can you help w/ coding?

Site: hrdripbar.squarespace.com/dripcocktails
Password: Dripbar21

Add to Design > Custom CSS

/* Align add to cart */
@media screen and (min-width:768px) {
div#page-section-609b3ee39e0fa43c547c4288 .span-4 .sqs-add-to-cart-button-wrapper {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}
div#page-section-609b3ee39e0fa43c547c4288 .span-12>.row>.span-4 {
    flex: 1;
    position: relative;
    padding-bottom: 100px;
}
div#page-section-609b3ee39e0fa43c547c4288 .product-block {
    position: static;
}
}