Jump to content

w3-css cards of equal height (fixed)


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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...