Jump to content

w3-css cards of equal height (fixed)


sippytom
 Share

Recommended Posts

Hi all,
Similar in idea to another post.
I have a series of cards in a shopping cart.
When I display them as quarter width, they are not the same height.
When they are displayed they get mixed up further down the page.
Here is the code I am using. (a what I have tried)

So what I need is the same height for each card.

 

Sorry I could not see where to add a code block.

 

<script>
#box{
height:150px;
overflow:scroll;
}
</script>
<div class="w3-quarter ">
<div id="box">
<div class="w3-card-2">
<div class="w3-container w3-theme-l2 w3-small">
<?php echo $d["name"]; ?>
</div>
<div class="w3-container w3-center">
<img src="<?php echo $d["thumb"] ?>" style="width:90%">
</div>
<div class="w3-container">
<div class="w3-small">Item Code: <b><?php echo $d["item_code"] ?></b></div>
<div class="w3-small">Price: <b><?php echo '$' .$d["retail_cost"] ?></b></div>
<br>
<p><?php echo truncate(htmlspecialchars_decode($d["description"]),200) ?></p>
<a class="w3-btn w3-theme-l4 w3-tiny w3-round-large" href=".?action=catalog&catID=<?php echo $d["id"]; ?> ">More Details</a>
</div>
<br>
</div>
</div>
</div>
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...