Angel Politis Angel Politis - 4 months ago 11
CSS Question

How to create responsive product cards?

I am creating some product cards for my website that will display a short description on hover, but I cannot make them adapt to the current description which results in the button being thrown out of the card.

At the moment my dimensions are fixed, but I tried setting my current

height
as
min-height
and it didn't work out.

I have created a dummy card in a jsFiddle for you to illustrate my issue here. Alternatively, you can use the snippet below.



#section1 > .wrapper {
/* Text */
text-align: justify;
}
.hot-topic {
/* Text */
font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
line-height: 1.5;
font-size: 15px;
font-weight: 400;
/* Dimensions */
width: 282px;
height: 226px;
/* Positioning */
position: relative;
margin-top: 50px;
/* Styling */
background-color: #2f2f31;
border: 5px solid #2f2f31;
border-radius: 2px;
box-shadow: 2px 2px 3px;
}
.hot-topic > h3 {
/* Text */
color: #999999;
font-size: 1.0rem;
line-height: 1.2;
text-overflow: ellipsis;
/* Positioning */
margin: 5% 0 2% 3%;
overflow: hidden;
/* Visibility */
display: block;
}
.topic {
/* Dimensions */
width: 282px;
height: 159px;
/* Styling */
background-color: white;
background-image: url(http://www.bhphotovideo.com/images/images2500x2500/HP_Hewlett_Packard_BV701AA_ABA_Pavilion_Slimline_s5_1010_Desktop_793042.jpg);
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
.topic:hover {
/* Styling */
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-ms-filter: blur(1px);
-o-filter: blur(1px);
filter: blur(1px);
}
.topic:hover + .caption {
display: block;
}
.caption {
/* Text */
color: #bbbbbb;
font-size: 0.8rem;
text-align: center;
/* Dimensions */
width: 265px;
height: 159px;
/* Positioning */
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 0% 3% 0 3%;
/* Visibility */
display: none;
/* Styling */
background: rgba(0, 0, 0, .8);
}
.caption:hover {
/* Visibility */
display: block;
}
.caption-wrapper {
/* Text */
text-align: justify;
}
.button {
/* Text */
color: #bbbbbb;
/* Positioning */
position: relative;
padding: 5px 10px;
/* Styling */
background-color: transparent;
border: 1px solid #bbbbbb;
outline: none;
/* Transitions */
-webkit-transition: background-color .5s ease, color .5s ease;
}
.button:hover {
/* Text */
color: #0c0c0c;
/* Styling */
cursor: pointer;
background-color: #bbbbbb;
/* Transitions */
-webkit-transition: background-color .5s ease, color .5s ease;
}

<div class="hot-topic">
<div class="topic">
</div>
<div class="caption">
<div class="caption-wrapper">
<p>This HP Pavilion Slimline S5 1010, one of of the best machines Hewllett Packard has to offer.
<br/>
<br/>It has a 3.2GHz Intel Pentium E6700 CPU and a 750GB 7200rpm Hard Drive.</p>
</div>
<button class="button">Read More</button>
</div>
<h3>HP Pavilion Slimline S5 1010</h3>
</div>




Answer

By using the following code in JavaScript, the problem is fixed.

var height = $(".caption").height();
for (var i = 0; i < document.getElementsByClassName("button").length; i++) {
    height += $(".button").height();
}
for (var i = 0; i < document.getElementsByClassName("caption").length; i++) {
    document.getElementsByClassName("caption")[i].style.height = height;
}