Hello everyone,
got a problem while building my portfolio page and can’t figure out the solution.
Thumbnail images are of different height and so thumbnails become different height as well. how can i make them same height while keeping images original height and thumbnails responsive to screen width. also make captions aligned at the same height.
i want it to be something like this
as you can see i wat to make all 4 thumbnails the same height. but currently the first on is shorter than the rest.
my code:
div class=“container”
div class=“jumbotron”
div class=“row”
center h4 id=“portfolio” PORTFOLIO /h4 /center
br/
div class=“col-md-3 col-xs-6”
a href=“https://codepen.io/Naglis/pen/xpBzzW” target=’_blank’
div class=“thumbnail”
img src="…" alt=“no picture” style=“image responsive”
div class=“caption” h6 Tribute page /h6 /div
/div
/a
/div
div class=“col-md-3 col-xs-6”
a href="" target=’_blank’
div class=“thumbnail”
img src="…" alt=“no picture” style=“image responsive”
div class=“caption” h6 Lorem ipsum dolor sit /h6 /div
/div
/a
/div
div class=“col-md-3 col-xs-6”
a href="" target=’_blank’
div class=“thumbnail”
img src="…" alt=“no picture” style=“image responsive”
div class=“caption” h6 Lorem ipsum dolor sit /h6 /div
/div
/a
/div
div class=“col-md-3 col-xs-6”
a href="" target=’_blank’
div class=“thumbnail”
img src="…" alt=“no picture” style=“image responsive”
div class=“caption” h6 Lorem ipsum dolor sit /h6 /div
/div
/a
/div
/div
/div
/div
.background {
background-color: #b1d6eb;
}
#navigation {
background-color: #464553;
padding: 20px;
margin-top: 50px;
}
div {
font-family: “lato”, “Verdana”, “Arial”, “sans-serif”;
}
h1 {
font-weight: 300;
}
hr {
width: 70%;
height: 1px;
background-color: black;
}
a {
color: black;
}
p {
font-weight: 400;
}