CODEWITHSUNDEEP
csstwitter-bootstrap
user3018152
user3018152

Reputation: 37

creating a dynamic height for a div

I have a simple div that contains product information (image, title, description, price, etc...). I'm using bootstrap (3.x)On the desktop, I use a specific height for the div so everything is equal, displaying in 2 columns. On Mobile, I only have one column and I'd like to find a way to make the div height dynamic based on the size instead of setting a specific pixel height (descriptions vary and can change the height of the div quite a bit). Is this possible? The div's are created dynamically from a database... Here's the current css - as you can see, I'm setting the height with pixels right now.

.prodBox2 { 
height: 300px;
margin-bottom: 10px;
padding:5px; 
border: 3px solid #666666;
border-radius:25px;
font-family: arial;
font-size: .8em;
color: rgb(50, 50, 50);
}
.prodImage2 {
float: left;
margin: 10px;
width: 125px;
height: auto;
}

Here's a codlin link if it helps: http://codepen.io/shadowfax007/pen/xVqQNm

Upvotes: 0

Views: 596

Answers (1)

tao
tao

Reputation: 90068

Any div's height is dynamic by default. So all you need to do is wrap the height condition in a media query (at screen widths above 768px):

@media(min-width: 768px) {
  .prodBox2 {
    height: 300px;
    overflow-y: auto;
  }
}
.prodBox2 {
  margin-bottom: 10px;
  padding: 5px;
  border: 3px solid #666666;
  border-radius: 25px;
  font-family: arial;
  font-size: .8em;
  color: rgb(50, 50, 50);
}
.prodImage2 {
  float: left;
  margin: 10px;
  width: 125px;
  height: auto;
}

As a side note, you probably want to do some reading on responsiveness, you are currently doing it wrong. In any good responsive design, you do not need to specify heights.

Upvotes: 1

Related Questions