Setting equal height posts for the post archive widget in Elementor

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

  1. From the Templates > Theme Builder menu, select All and then your Default Kit template, and choose Edit with Elementor.
  2. 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;
}