by This tutorial will help you set a same height on html element that has the same class/id. This feature gets the highest height pixel and set it as the height of all the html element.
- In your jquery file use this function and put it inside the .ready() method.
function sameheight_blog(){
var target_class = [
'.add-your-class-here-1',
'.add-your-class-here-2',
'.add-your-class-here-3'
];
$( target_class ).change(function() {
for (let i = 0; i < target_class.length; i++) {
var get_heights = $(target_class[i]).map(function ()
{
return $(this).height();
}).get();
maxHeight = Math.max.apply(null, get_heights);
console.log(get_heights);
$(target_class[i]).css('height', maxHeight);
}
})
}- In the target_class variable add the class of your html element that you wanted to have the same height applied. just note that you can add multiple classes as much as you want.
- After this, click save then you are done.
note: after updating the code kindly add the code above inside the resize() function also.
Here is the example on where i implemented the same height function. see screenshot below.
on the screenshot above, i applied the same height feature on the title so that the excerpt below it will be push back at the bottom for a little.
I use the “.wp-block-post-title” class because the 3 items have all this class.
So that’s it for this tutorial. If you find it difficult to implement just message the author of this post.