Help Center
Setting all Listing Items Equal Height

Setting all Listing Items Equal Height

Discover how to make all items from the JetEngine Listing equal in height on your WordPress website.

Before you start, check the tutorial requirements:

  • Elementor (Free version), Block editor (Gutenberg) or Bricks builder

  • JetEngine plugin installed and activated with Listing Item built

Equal Columns Height Toggle

Head to the page where you want the Listing to be displayed. You can edit this page with Gutenberg, Elementor, or Bricks page builders. 

In this case, we will work in Elementor.

Place the Listing Grid widget/block/element on the page if you haven’t done so already and select the desired Listing.

As you can notice, the item columns in the Listing now vary in height.

listing grid in elementor

To make the columns equal, find the Equal columns height toggle in the Content tab and activate it.

Press the “Publish/Update” button to save the page.

equal columns height toggle activated

To check the result, open the just-edited page on the front end. 

Now, all the columns have equal heights.

listing grid on the front end

This way, the Listing items will be aligned along the upper edge. To align all the contained widgets, complete the following steps.

Minimum Height Adjust

Go to WordPress Dashboard > JetEngine > Listings/Components and open the Listing you are working on in the editor. 

We work with Elementor. However, you can build a Listing with Gutenberg or Bricks.

To make the widget content equal, place the widget with content of different heights in the Inner Section widget.

As there are two columns added, we delete the second one.

Open the Inner Section widget settings and set the Height to “Min Height.” Then, set the Minimum Height of the inner section to make the section bigger than it is now.

For instance, we have the “Address” Dynamic Field and set its Minimum Height to “90” to widen the height of the section in case the input addresses have different numbers of symbols.

This way, the following Icon List widget will be displayed at the same level relative to each other.

inner section widget
Things to know

If you use a Container widget, you should add each widget of different heights to separate containers and set the Min Height for each container.

container min height

Repeat this process for all the widgets with different heights and press the “Update” button.

To check the result, open the page with the edited Listing item used as a Source for the Listing Grid.

Now all the content in the Listing Grid is aligned.

min height set result

That’s it; now you know how to set all Listing Items to equal height using the JetEngine plugin for WordPress.

Was this article helpful?
YesNo

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.