Reputation: 11313

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>

Upvotes: 1

Answers (3)

a1626

Reputation: 2964

Here is the solution with simple javascript. I've included the whole html file as the code block that i pasted were not working either in snippet or in other people's local.

 <html>
  <head>
    <style>
      #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: inherit;
        /* 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;
      }

    </style>
  </head>
  <body>
    <div id="hot-topic" class="hot-topic">
      <div id="parentDiv">
        <div id="topic" class="topic">
        </div>
        <div id="caption" class="caption" onmouseover="changeHeight(this)">
          <div class="caption-wrapper">
            <p>This HP Pavilion Slimline S5 1010, one of of the best machines Hewllett Packard has to offer.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>
      </div>
      <h3>HP Pavilion Slimline S5 1010</h3>
    </div>
    <script>
      function changeHeight(x){
        document.getElementById('parentDiv').style.height=x.clientHeight;
        document.getElementById('topic').style.height=x.clientHeight;
        document.getElementById('hot-topic').style.height=x.clientHeight+67;

      }
    </script>
  </body>
</html>

I hope this is what you were looking for.

Upvotes: 0

Angel Politis

Reputation: 11313

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;
}

Upvotes: 0

user6464808

Reputation:

Watching your jsFiddle, I think your card looks like the ones Codepen uses. I have watched Codepen's code and the card's size is fixed. They load they content through iframe and that's why their button doesn't overflow the parent. I hope it helps.

Upvotes: 2

How to create responsive product cards?

Answers (3)

Related Questions