After including the CSS below:
.caption h4 {
min-height: 2.2em; /* 2 lines as line-height is 1.1 */
}
All "View details" appear at the same level, but this solution does not address the issue of taller captions. It only works if no caption exceeds this height. (However, it's fine if you're certain nothing will be taller than your predetermined value.)
To handle higher captions, I use the following snippet of CSS to set a maximum height:
.caption h4 {
max-height: 4.4em; /* 4 lines as line-height is 1.1 */
height: 4.4em; /* setting it as a multiple enables overflow handling */
overflow: hidden; /* ensuring no line is cut in the middle */
}
If you wish to dynamically set the max-height based on the tallest caption, you can achieve this with some JavaScript:
(function(d) {
var captions = d.querySelectorAll('.caption h4'),
height = 0;
for(var i = 0; i < captions.length; i++) {
height = Math.max(height, captions[i].offsetHeight); // or clientHeight depending on your box model
}
var style = d.createElement('style');
style.type = 'text/css';
style.innerHTML = '.caption h4 { max-height: '+ height +'px; height: '+ height +'px; }'; // they don't need overflow as none of them can overflow;
d.getElementsByTagName('head')[0].appendChild(style);
})(document);
Add this script towards the end of the body section so that the DOM is fully loaded (or trigger it using onload).
Note: This code may not work on older browsers due to the use of querySelectorAll.
Implementing this solution has successfully resolved the issue on your website.