In this short guide, we’ll show you how to add CSS styling to your post archive widget so that your posts have an equal height.
1. Navigate to your Post Archive template
- From the
Templates > Theme Builder
menu, selectAll
and then yourDefault Kit
template, and chooseEdit with Elementor
. - From the Elementor editor, select the
Custom CSS
panel.
2. Add the following CSS
.elementor-widget-posts article { display: flex !important; flex-direction: column; } .elementor-widget-posts .elementor-post__text { display: flex; flex-direction: column; } .elementor-widget-posts .elementor-post__excerpt { /* Change this to ".elementor-post__title" if you want to increase the height of the title, rather than the excerpt */ flex-grow: 1; }