Troubleshooting //
Setting all Listing Items Equal Height

Setting all Listing Items Equal Height

Question

How to make all Listing Items equal in height?

Answer

Tutorial requirements:

To make all items in the Listing Grid widget or block equal in height, perform these simple additional steps:

Add the Inner Section or Container widget

Firstly, proceed to JetEngine > Listings and click to edit the needed Listing Item. Add the Inner Section or Container widget.

inner section widget

Place the widget with different heights inside the Section

Afterward, drag-n-drop the meta widget (Meta Field, Meta Image, etc.) that visually has different content heights in Listing Grid to Inner Section.

dynamic field in inner section

Adjust the minimum height

Now it’s time to adjust the minimum height of the Inner Section widget based on the visually biggest item. Select the “Min Height” Height and set the Minimum Height for the widget in the Layout settings.

inner section minimum height

Repeat for every widget with different heights

If there’re other widgets with different content heights, repeat the same action for each of them by selecting the visually biggest item and applying the minimum height of Inner Section based on the height of the corresponding item.

When you finish, hit the “Update” button.

Enable the Equal Columns Height toggle

And lastly, proceed to the page with Listing Grid, and enable the Equal columns height toggle in the General widget settings.

equal column height

Now all items in Listing Grid look perfectly structured and equal in height.

listing grid with equal column height on the front end
Was this article helpful?
YesNo
Still need help?
Submit a request