In this experiment, the idea was to address a common web design issue which is having a set of similar items with different content stay visually similar in sub-element height.
Example with Loop grid
Our starting point.
Here are three cards with different lengths of text content in the sub elements such as title and blurb. (Make sure to take a look on desktop or tablet to understand the issue at hand).
This example uses Javascript to find all occurances of the ‘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).
