Cyber Monday Sale Ends in

0Days

0Hours

0Minutes

0Seconds

Buy 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
Cyber Monday Popup