Joomla! 4 is completely redesigned, rethought, and has new features. Joomla 4 Templates

By default, height of the container is defined by the amount of content (text, images…) it contains. In example, if you have a row with multiple modules and they have background and/or border set, they will look uneven if they have different amount of content. This is feature is useful if you want to equalize heights of multiple module boxes in a row, especially when they have background and/or borders set.

Equal Heights

To activate this feature, enter the class names (without dot in the beginning of class names) of the rows where you'd like to equalize the heights of the .cell containers (modules are inside them) into the Row Classes for Equal Heights pane. If you have more than one class, separate the row classes with commas, in example “class1,class2”.

You can distinguish a row from the others by adding a class to it in the Row Settings (read about this in the Layout section).

You can also use this feature for other elements, for example on your content page. All you need is to keep this HTML structure:

<div class=“my_class”>
  <div>Element 1</div>
  <div>Element 2</div>
  <div>Element 3</div>

In this example, if you enter class “my_class” in the Row Classes for Equal Heights pane, the three child elements will have the equal heights, regardless of the amount of content inside them.

Note that the Equal Heights feature is enabled automatically when you enter at least one class in the “Row Classes for Equal Heights” pane.


Equal Heights Sample

A sample of the equalized heights of the containers. This sample is from Shoes template. This template is available for all premium members.