Skip to main content Skip to footer

Voxel Guides

How to Set All Post Feed Containers to the Same Height in the Voxel WordPress Theme

In the Voxel WordPress Theme, sometimes Post Feeds or Term Feeds have uneven heights when displaying posts due to different lengths of content.

This can make the layout look messy and unprofessional.

Even setting 100% height on elements in the Elementor builder UI does not fix it. The issue arises from the Elementor page builder adding extra non-targetable div elements that interfere with the layout.

Fortunately, this is an easy fix! By applying a small snippet of custom CSS, you can ensure that all the containers in the Voxel Post Feed and Term Feed have the same height, creating a more polished and professional look.

In this article, we’ll walk through the steps to achieve this and explain how the CSS targets the specific elements causing the issue.

The Solution

Option 1: Add the following CSS. No other edits necessary. This sets a uniform height for all containers in the Voxel Post Feed grid and the Term feed widget across your entire site:

/* Post feed widget - Equal heights */
.post-feed-grid .elementor {
height: 100%;
}
.post-feed-grid .ts-preview>.elementor>.elementor-element {
height: 100%;
}

Option 2: Manually set a min-height = 100% on the outermost preview card container and only use top part of CSS.

/* Post feed widget - Equal heights */
.post-feed-grid .elementor {
height: 100%;
}

Set min-height = 100% on the outermost preview card container.

How It Works

.post-feed-grid .elementor { height: 100%; }: Ensures all .elementor elements within the .post-feed-grid take up the full height of their containers. This DIV cannot be accessed through the Elementor UI.

.post-feed-grid .ts-preview>.elementor>.elementor-element { height: 100%; }: Sets height of 100% to the 1st container element added in Elementor. In Option 2, you do this manually by adding the min-height.

Considerations

Elementor Updates: If Elementor reduces the number of divs it generates in future updates, this CSS might stop working. Check the layout after updates.
Adding CSS: My recommendation is to use the free Fluent Snippets plugin. Or you can add the CSS via Appearance > Customize > Additional CSS or your theme’s stylesheet.

This solution is a quick fix to align your grid layout in the Voxel Post Feed and Term Feed widgets.

Unleash Dynamic Data with Voxel!

voxel-logo
.
With Voxel’s design flexibility, the possibilities are endless. Get Voxel here!

Bonus: How to Align a Container to the Bottom using Margin Top Auto

Often you want an element aligned to the bottom of the Post Feed Preview Card.

To achieve this we can add Margin Top Auto to the Container (we can not add this to the specific widget because Elementor adds extra inaccessible divs).

More Articles

How to Group Taxonomies by Parent and Child on Single Post Template Voxel Theme

Displaying parent categories with their child categories grouped underneath in Voxel is difficult and not directly supported by default term feed options. To achieve this, you need to use a term loop workaround that allows child terms to be looped inside a parent term preview. The steps below show how to do this using native […]

Voxel Framework – Voxel Theme Features for Bricks and Gutenberg Users

Voxel Framework is a new WordPress plugin in development that brings Voxel’s features to Bricks Builder and Gutenberg. While Voxel can create custom post types, taxonomies, and custom fields — and supports powerful dynamic data, conditional logic, and visibility rules — its real value goes far beyond content structure. Details below are speculative based on […]
Previous Next