Veslav Veslav - 4 months ago 50
HTML Question

Materialize alignment issue with cards

Hey guys I'm using the materialize framework and I added some normal image cards like this.

screenshot

<div class="row">
<div class="col s12 m6 l3">
<div class="card">
<div class="card-image">
<img src="img/websiteicon.png" alt="websites">
<span class="card-title">title here</span>
</div>
<div class="card-content">
<p>text here</p>
</div>
<div class="card-action">
<a href="diensten.php">check out possibilities</a>
</div>
</div>
</div>
(4 div cards)
</div>


This only appears at the medium browser size and only at certain widths.

Does anyone know how to fix this? Pretty sure it's not a bug.

Answer

This is because your cards have different heights, which causes some cards to appear on the wrong "row". The reason it only appears on certain widths is because of the content reflowing, causing the parent element to expand in height.

There are a couple of ways you can solve this. You can make use of Materializes card size. This sets the card to a static height, but if you need to display a lot of content I would not recommend it.

<div class="card medium">
 ...    
</div>

Another way to solve this is by adding another level of rows, grouping (as an example) 2 cards. If you use the correct size on the columns (2 cards with .m6, 3 with .m4, 4 cards with .m3 and so on) it will not cause the content of the row to wrap to a second row.

<div class="row">
 <div class="row col s12 m12 l6"> <!--1st row containing 2 cards-->
  <div class="col s12 m6 card">
   ...
  </div>
  <div class="col s12 m6 card">
   ...
  </div>
 </div><!--END ROW-->

 <div class="row col s12 m12 l6">  <!--2nd row containing 2 cards-->
  <div class="col s12 m6 card">
   ...
  </div>
  <div class="col s12 m6 card">
   ...
  </div>
 </div><!--END ROW-->
</div

Live example: http://codepen.io/DehraX/pen/LkQBwZ

Comments