I seem to be having an issue with the size of thumbnails on my website. The problem arises when a thumbnail with a long title is displayed, as it ends up taking up more space and affecting the layout. Is there a solution to ensure that the thumbnail size remains consistent regardless of the length of the title?
Below is the snippet of HTML code along with CSS where I am facing this issue:
<div class="panel-body">
<div id="recipeResults" class="row">
<!-- templates/BasicImages/imageTemplates.js -->
</div>
</div>
And here is the actual code. Apologies for any confusion :)
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<div class="hovereffect">
<img class="img-responsive center-block" src="{{json.url}}" alt="{{json.alt_name}}">
<div class="overlay">
<h3> {{json.hoverDescription}}</h3>
<a class="info" href="#"><i class="fa fa-clock-o fa-fw" aria-hidden="true"></i>{{json.cookTime}}</a>
</div>
</div>
<div class="caption">
<p style="font-size: 1pt;"> </p>
<h4>{{json.name}}</h4>
<p>{{json.description}}</p>
<p><button type="button" class="btn btn-default btn-sm" aria-label="Left Align">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Save
</button></p>
</div>
</div>
</div>