Materialize Cards Not on Equal Height
11,400
Default Materialize sizes
MaterializeCSS offers three default sizes for cards (small, medium and large). These can be added like the following: (taken directly from the docs, under the title "Card Sizes".)
<div class="card small">
<!-- Card Content -->
</div>
Custom Height
If all images need to have the same height, and a fixed height is acceptable, add this to your css:
.card-image{
height: 400px; /* Your height here */
overflow: hidden;
}
Author by
Dos
Updated on June 09, 2022Comments
-
Dos almost 2 years
I created a codepen trying to get equal height for the cards, but I was unable to.
The images have different sizes and I added the
responsive-img
tag.https://codepen.io/jgacuca567/pen/qXwXEz
<main class="container-fluid"> <section class="row"> <div class="col s12 m4 l4"> <div class="card"> <div class="card-image"> <img src="https://unsplash.it/4579/3271?image=1084" class="responsive-img"> <span class="card-title">Card Title</span> </div> <div class="card-content"> <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p> </div> <div class="card-action"> <a href="#">This is a link</a> </div> </div> </div> <div class="col s12 m4 l4"> <div class="card"> <div class="card-image"> <img src="https://unsplash.it/5472/3648?image=1083" class="responsive-img"> <span class="card-title">Card Title</span> </div> <div class="card-content"> <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p> </div> <div class="card-action"> <a href="#">This is a link</a> </div> </div> </div> <div class="col s12 m4 l4"> <div class="card"> <div class="card-image"> <img src="https://unsplash.it/5416/3611?image=1082" class="responsive-img"> <span class="card-title">Card Title</span> </div> <div class="card-content"> <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p> </div> <div class="card-action"> <a href="#">This is a link</a> </div> </div> </div> </section> </main>