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

Was this article helpful?
0 out Of 5 Stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.