Bootstrap 3 cards with same height and width CSS HTML

1014 views html
4

Hi i have bootstrap 3 cards in my shop, however my problem is that it is not with the same height and width if its in mobile view.. like this one.. Please see the link below so i could show you what the cards look like.

THE CARD PHOTO

THE CARD PHOTO 2

What i need is IT to be aligned and have the exact same width and height when viewed in a mobile.. Thanks!

This is my css code for the cards:

/* EXAMPLE 1 - BOOTSTRAP FLEXBOX
   - Equal Height Columns in Rows
   - Equal Height Thumbnails
   - Flex Grow to Fill Paragraph Height
*/

/* Flexbox Equal Height Bootstrap Columns (fully responsive) */
@media only screen and (min-width : 500px) {
  .flex-row.row {
    display: flex;
   flex-wrap: wrap;
  }
  .flex-row.row > [class*='col-'] {
    display: flex;
    flex-direction: column;
  }
  .flex-row.row:after, 
  .flex-row.row:before {
   display: flex;
  }
  .flex-row.row > [class*='col-'] > .box {
   display: flex;
   flex: 1;
  }
}

/* Grow thumbnails to fill columns height */
.flex-row .thumb,
.flex-row .caption {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
}

/* Flex Grow Text Container */
.flex-row .caption p.flex-text {
  flex-grow: 1;
}

/* Flex Responsive Image */
.flex-row img {
  width: 100%;
  height: auto;
}

.thumb{
  padding-bottom: 10px;
}

.caption{

}
/* EXAMPLE 2 - CSS TABLES EQUAL HEIGHT
   - ie9 support 
   - not responsive (mobile fallback)
*/

.table-row.row,
.table-row-equal {
  display: table;
  width: 100%;
  table-layout: fixed;
  word-wrap: break-word;
}
.table-row.row [class*="col-"] {
  width: 25%;
}
.table-row.row [class*="col-"],
.table-row-equal .thumb {
  float: none;
  display: table-cell;
  vertical-align: top;
}
.table-row-equal {
  border-spacing: 30px 0px;
}
.table-row-equal .thumb {
  width: 1%;
}
/* mobile fallback to support partial responsiveness */
@media only screen and (max-width: 500px) {
  .table-row-equal .thumb {
    display: block;
    width: 100%;
  }
}

/* MASONARY BOOTSTRAP 3 GRID
   - Who needs V4?
*/
.masonary-row.row {
  -webkit-column-gap: 30px;
  column-gap: 30px;
  padding-left: 15px;
  padding-right: 15px;
  word-wrap: break-word;
  -webkit-column-fill: balance;
          column-fill: balance;
}
.masonary-row [class*="col-"] {
  display: inline-block;
  width: 100%;
  height: 100%;
  float: none;
  padding: 0px;
  -webkit-column-fill: balance;
          column-fill: balance;
}

@media (min-width: 480px) {
  .masonary-row.row {
    -webkit-column-count: 2;
    column-count: 2;
  }
}
@media (min-width: 768px) {
  .masonary-row.row {
    -webkit-column-count: 3;
    column-count: 3;
  }
}
/* demo */
.bootflex .well {
      flex-grow: 1;
  }

/* pre hack for small devices */
pre {
  display: flex;
  flex: 1;
}
.flex-row.flex-code.row > [class*='col-'] .flex-text {
  flex-grow: 1;
  display: flex;
}
.overview {
  display: flex;
  padding-right: 10px;
}

.card-default {
  display: flex;
  flex-wrap: wrap;
}

.card-default>* {
  width: 100%;
}

.excludingImage {
  align-self: flex-end;
  text-align: center;
}

/* End Added */

.card {
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 6px;

}

.card>.card-link {
  color: #333;
}

.card>.card-link:hover {
  text-decoration: none;
}

.card>.card-link .card-img img {
  border-radius: 6px 6px 0 0;
}
.card .card-body {
  /* display: table;
  width: 100%; */
  padding: 12px;
}

.card .card-header {
  border-radius: 6px 6px 0 0;
  padding: 8px;
}
.card .card-footer {
  border-radius: 0 0 6px 6px;
  padding: 8px;
}

and this is code for my HTML card:

  <div class="col-xs-6 col-sm-4 col-lg-3">
                    <div class="thumb">
                     <div class="caption card card-default">
                        <div class="card-img">
                          <img src="user_images/<?php echo $row['userPic'] ?>" alt="Card image" class="img-thumbnail" height="100">
                        </div>
                        <div class="excludingImage">
                          <div class="card-body">
                            <p class="card-text" ><b><?php echo $cartname ?></b></p>
                            <p class="card-text" ><strike >?<?php echo $orig ?>.00</strike> ?<?php echo $cartprice ?>.00</p>
                          </div>
                          <div class="card-footer text-center">
                            <a href="shopview.php?prod=<?php echo $cartname ?>"><button type="button" class="btn btn-pink btn-sm"><i class="fa fa-shopping-cart"></i> View Pro

answered question

The problem you have there (according to your images) is that your product image is bigger in the problematic card. You could add a constraint to the card itself, though that would cut off your View product button. Do you just want to shrink the image?

1 Answer

2

Check the images you are loading and the text of every product. If the image for every card is not the same height, that will push the height of each individual card. The same goes for the text of each card, if the name of the product overflows to a second line, it will push the height of the card.

posted this

Have an answer?

JD

Please login first before posting an answer.