Aligning Bottom of Image Blocks

Site URL: https://www.sundayschoolwine.com/

I have three image blocks (image stacks) lined up horizontally. I would like them to stay aligned when the browser shrinks (see image). Brine 7.0

Any thoughts?? Thank you!

Add to Home > Design > Custom CSS

/* equal height summary */
@media screen and (min-width:768px) {
div#page-5fdc0d5070085b385fead64b .span-12 .span-4 {
    background: #fdfced;
    margin: 20px;
}
div#page-5fdc0d5070085b385fead64b .span-12 .row {
    display: flex;
}
div#page-5fdc0d5070085b385fead64b .span-12 .row .image-block {
    padding: 0;
}
}

@tuanphan thank you!!!

On 12/26/2020 at 11:07 PM, mallorycs said:

@tuanphan thank you!!!

On Mobile, I see Member login overlap Footer text. You can add this to Custom CSS to fix

/* fix mobile footer overlap */
@media screen and (max-width:640px) {
footer.Footer {
    padding-bottom: 70px !important;
}
}

Some pages have long content. You can consider adding a back to top button.

Also, title - image. Do you want to add a spacing?

/* title spacing */
@media screen and (max-width:640px) {
h1.ProductItem-details-title {
    padding-bottom: 20px;
}
}