Black Friday Super Sale 2024 is Coming Soon

WIN AN iPAD, LIFETIME MEMBERSHIP
×

Search Divi Plus Documentation

Search for answers or browse our knowledge base.

All Topics
Print

How to align the button to the bottom in DP image card

If you have used multiple Image Card modules on the page and want the same alignment of the button in all Image Cards.

Please add the class equal_height_image_cards in each image card module you have used.

Then add the below CSS code in Divi Theme Options

.dipl_image_card.equal_height_image_cards,
.dipl_image_card.equal_height_image_cards .et_pb_module_inner,
.dipl_image_card.equal_height_image_cards .dipl_image_card_wrapper,
.dipl_image_card.equal_height_image_cards .dipl_image_card_inner_content_wrapper
 {
    height: 100%;
}
.dipl_image_card.equal_height_image_cards .dipl_image_card_wrapper,
.dipl_image_card.equal_height_image_cards .dipl_image_card_inner_content_wrapper 
{
    display: flex;
    flex-direction: column;
}
.dipl_image_card.equal_height_image_cards .dipl_image_card_content_wrapper 
{
    flex-grow: 1;
}
.dipl_image_card.equal_height_image_cards .et_pb_button_wrapper
 {
     display: flex;
     align-items: flex-end;
     justify-content: center;
     flex-grow: 1;
}

Table of Contents