In the Voxel WordPress Theme, you may have noticed that the containers sometimes have uneven heights when displaying posts or terms in a grid format using the Voxel Post Feed or Voxel Term Feed widgets.
This can make the layout look messy, especially when displaying different content types. Unfortunately, even setting 100% height on elements in the builder does not fix it. The issue arises from the Elementor page builder adding extra non-targetable div elements that interfere with the grid layout.
Fortunately, this is an easy fix! By applying a small snippet of custom CSS, you can ensure that all the containers in the Post Feed grid 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
Add the following CSS to force uniform height for all containers in the Voxel Post Feed grid (this targets both the post feed widget and the term feed widget):
.post-feed-grid .elementor {
height: 100%;
}
.post-feed-grid .ts-preview>.elementor>.elementor-element {
height: 100%;
}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.
.post-feed-grid .ts-preview > .elementor > .elementor-element { height: 100%; }: Targets specific Elementor elements inside .ts-preview and forces them to match the same 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.
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).
