This has been bugging me recently with Elementor, in that you could have an image that would bring the text to not just possibly a different line, but flowing past the height of the image above it. It doesn’t have to be every x number of pixels, but rather varies depending on the image added.
Of course, you could simply edit the image so that it is at a certain size only. But there are still cases wherein the image would have to be at a different thumbnail size. One use case would be through centralising all slider logos.
.elementor-image-box-img available on the webpage. Afterwards you can begin the actual function.
You would need to group them up by their parent row. This would be the
elementor-row element that was declared in the variable.
Now you can pass an IIFE to
window.onload containing the necessary adjustments. Now loop through each and every
.elementor-row, and within each and every
.elementor-row, look for the tallest
.elementor-image-box-img. If you would find a taller one, then update the
highestBox variable. Once done looping, set the tallest height towards all the elements within their parent
.elementor-row. Up one level, and by the time you realise it, you have passed through all
.elementor-row elements by now and everything’s looking good.
If you guys are wondering about the CSS used to style up the Elementor Image Box widgets into cards, with their heights all aligned, please see the code below.
Any questions please feel free to let me know!