Example with Loop grid

This example uses a Javascript to find all occurances of sh-container class in a page. I used the Advanced Scripts WordPress plugin to add the Javascript to the footer of the specific page. (Advanced Scripts is a must have tool for any serious WordPress Dev).

 When the page loads, if occurances of the .sh-container class are found, the script will look inside each ‘.sh-container’ instance for a series of classes (sh-01 -> sh-05). All sub-items with the sh-01 class will be vertically measured and all made to match the tallest class item. This process is then repeated for the remaining classes (sh-02 -> sh-05). 

In the following example using the Elementor Loop Grid widget, the sh-container class was directly added to the loop grid block via Advanced > CSS Classes.

The template used for the loop was also edited and the image had sh-01 attached, title (sh-02), blurb (sh-03) and the button (sh-04). 

Post 8

Same Height sub elements with content change and resize detectors.

Post 7

Same Height sub elements with content change and resize detectors. Same Height sub elements with content change and resize detectors.

Post 6

Same Height sub elements with content change and resize detectors. Same Height sub elements with content change and resize detectors.