SashayAway SashayAway - 3 months ago 10
CSS Question

How make all thumbnails have the same height?

After reading different posts, I can't find how to fix this problem. I would like all the thumbnails have the same height regardless of content or the screen re-size. (Please check the code below and try to make smaller your screen)



<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="Keywords" content="">
<meta name="robots" content="index,follow">

<title>Creative Designer | Andres Arigon</title>

<!-- CSS -->
<link rel="stylesheet" type="text/css" href="aa_CSS.css" />
<link rel="stylesheet" href="animate.min.css">
<style type="text/css">
body,td,th {
font-family: Open Sans !important;
font-size: 16px !important;
color: #666666 !important;
padding-top:54px
}

.thumbnail {
position: relative !important;
padding: 0px !important;
margin-bottom: 0px !important;
border-radius:0px !important;
border-right: 1px solid #ddd !important;
border-top: 1px solid #ddd !important;
border-bottom: 1px solid #ddd !important;
border-left: 0px solid #ddd !important;

}

.thumbnail img {
width: 100% !important;
}

.thumbnail .caption {
background-color: #333;
color: #fff !important;
padding: 9px;
}




.hovereffect {
width:100%;
height:100%;
float:left;
overflow:hidden;
position:relative;
text-align:center;
cursor:default;
}

.hovereffect .overlay {
width:100%;
height:100%;
position:absolute;
overflow:hidden;
top:0;
left:0;
opacity:0;
background-color:rgba(0,0,0,0.5);
-webkit-transition:all .4s ease-in-out;
transition:all .4s ease-in-out
}

.hovereffect img {
display:block;
position:relative;
-webkit-transition:all .4s linear;
transition:all .4s linear;
}

.hovereffect:hover img {
-ms-transform:scale(1.2);
-webkit-transform:scale(1.2);
transform:scale(1.2);
}

.hovereffect:hover .overlay {
opacity:1;
filter:alpha(opacity=100);
}


</style>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">







</head>
<body>
<!--projects-->
<div>
<div class="container-fluid">
<div class="row">

<!--pro1--><div style="padding-left:0 !important; padding-right:0px !important; " class="col-lg-2 hidden-md">
<div class="thumbnail hovereffect">
<img src="http://placehold.it/500x300" alt="">
<div class="caption">
<h4 style="color:#fff !important; text-align:center">PUBLICATION DESIGN</h4>
<p style=" text-align:center; margin-top:15px !important; font-size:87.5%; line-height:1.2em !important">Flyer AD - Photoshop</p>
<br><p style="letter-spacing:1px; text-align:center; font-weight:600; margin-top:0px !important; margin-bottom:0px !important; line-height:1.2em !important; padding-bottom:30px" class="c0fcfd1">PRINT DESIGN</p>
<div class="overlay"><a href="#" class="btn btn-info btn-xs" role="button">CHECK OUT</a></div>
</div>
</div>
</div>
<!--pro2--><div style="padding-left:0 !important; padding-right:0px !important; " class="col-lg-2 col-md-3">
<div class="thumbnail hovereffect">
<img src="http://placehold.it/500x300" alt="">
<div class="caption">
<h4 style="color:#fff !important; text-align:center">CORPORATE WEBSITE</h4>
<p style=" text-align:center; margin-top:15px !important; font-size:87.5%; line-height:1.2em !important">Responsive - CSS3 - Bootstrap</p>
<br><p style="letter-spacing:1px; text-align:center; font-weight:600; margin-top:0px !important; margin-bottom:0px !important; line-height:1.2em !important; padding-bottom:30px" class="c0fcfd1">WEB DESIGN</p>
<div class="overlay"><a href="#" class="btn btn-info btn-xs" role="button">CHECK OUT</a></div>
</div>
</div>
</div>
<!--pro3--><div style="padding-left:0 !important; padding-right:0px !important; " class="col-lg-2 col-md-3">
<div class="thumbnail hovereffect">
<img src="http://placehold.it/500x300" alt="">
<div class="caption">
<h4 style="color:#fff !important; text-align:center">HEALTH INSURANCE LANDINGPAGE</h4>
<p style=" text-align:center; margin-top:15px !important; font-size:87.5%; line-height:1.2em !important">Custom Insurance Theme - Bootstrap</p>
<br><p style="letter-spacing:1px; text-align:center; font-weight:600; margin-top:0px !important; margin-bottom:0px !important; line-height:1.2em !important; padding-bottom:30px" class="c0fcfd1">WEB DESIGN</p>
<div class="overlay"><a href="#" class="btn btn-info btn-xs" role="button">CHECK OUT</a></div>
</div>
</div>
</div>
<!--pro4--><div style="padding-left:0 !important; padding-right:0px !important; " class="col-lg-2 col-md-3">
<div class="thumbnail hovereffect">
<img src="http://placehold.it/500x300" alt="">
<div class="caption">
<h4 style="color:#fff !important; text-align:center">LIFE INSURANCE LANDINGPAGE</h4>
<p style=" text-align:center; margin-top:15px !important; font-size:87.5%; line-height:1.2em !important">Responsive Development - Bootstrap</p>
<br><p style="letter-spacing:1px; text-align:center; font-weight:600; margin-top:0px !important; margin-bottom:0px !important; line-height:1.2em !important; padding-bottom:30px" class="c0fcfd1">WEB DESIGN</p>
<div class="overlay"><a href="#" class="btn btn-info btn-xs" role="button">CHECK OUT</a></div>
</div>
</div>
</div>
<!--pro5--><div style="padding-left:0 !important; padding-right:0px !important; " class="col-lg-2 col-md-3">
<div class="thumbnail hovereffect">
<img src="http://placehold.it/500x300" alt="">
<div class="caption">
<h4 style="color:#fff !important; text-align:center">BUSINESS CARD</h4>
<p style=" text-align:center; margin-top:15px !important; font-size:87.5%; line-height:1.2em !important">Personalized Design - Print</p>
<br><p style="letter-spacing:1px; text-align:center; font-weight:600; margin-top:0px !important; margin-bottom:0px !important; line-height:1.2em !important; padding-bottom:30px" class="c0fcfd1">BRANDING</p>
<div class="overlay"><a href="#" class="btn btn-info btn-xs" role="button">CHECK OUT</a></div>
</div>
</div>
</div>
<!--pro6--><div style="padding-left:0 !important; padding-right:0px !important; " class="col-lg-2 hidden-md">
<div class="thumbnail hovereffect">
<img src="http://placehold.it/500x300" alt="">
<div class="caption">
<h4 style="color:#fff !important; text-align:center">EMAIL CREATIVE</h4>
<p style=" text-align:center; margin-top:15px !important; font-size:87.5%; line-height:1.2em !important">Responsive Emailing - HTML&nbsp;/&nbsp;CSS</p>
<br><p style="letter-spacing:1px; text-align:center; font-weight:600; margin-top:0px !important; margin-bottom:0px !important; line-height:1.2em !important; padding-bottom:30px" class="c0fcfd1">EMAILING</p>
<div class="overlay"><a href="#" class="btn btn-info btn-xs" role="button">CHECK OUT</a></div>
</div>
</div>
</div>

</div>
</div>
</div>


<!-- /.projects-->


</body>
</html>





I have thought to use min-height: 222px;

.thumbnail .caption {
color: #333;
min-height: 222px;
padding: 9px;
}


And it works, but I don't know how to move all the content to the middle, because it is fixed on the top frame, and they look very weird.

Maybe you know another easy way to fix this. Any help please?

Any help?

Please find the code below.

Answer

Just add

.row { display: flex; } 

and

.thumbnail .caption { height: 100% }