CODEWITHSUNDEEP
htmlcssmaterialize
Veslav
Veslav

Reputation: 466

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.

Upvotes: 2

Views: 1927

Answers (4)

user9694049
user9694049

Reputation: 211

I had a problem like this. It turned out that I had put a margin on another element on the page but it didn't show up and I forgot about it. After testing the cards in isolation, I eventually found the margin and deleted it and it went back to normal.

Upvotes: 0

Veslav
Veslav

Reputation: 466

I also found this if someone else needs some help:

http://codepen.io/TrueNorth/pen/MwVoYp 

hope it helped

Upvotes: 1

Tobias Skarhed
Tobias Skarhed

Reputation: 113

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

Upvotes: 2

Krešimir Galić
Krešimir Galić

Reputation: 376

I am pretty sure that all is good here. Here is the screenshot of same code like yours.

screenshot of code

Upvotes: -1

Related Questions