Card resize Materialize

Question

I'm trying to use 3 card to display the latest news on the site. On wide screen it looks fine like this

however when I resize the page to the content overflow from the card

this the the code snipplet

<div class="row">
    <div class="col s4">
      <div class="card small">
        <div class="icon-block">
          <h2 class="center brown-text"><i class="material-icons">flash_on</i></h2>
          <div class="card-content">
            <h5 class="center"><?php echo $children[2]->title; ?></h5>

            <p class="light"><?php custom_echo($children[2]->body, 200); ?></p>
          </div>  </div>
        </div>
      </div>

      <div class="col s4">
        <div class="card small">
          <div class="icon-block">
            <h2 class="center brown-text"><i class="material-icons">group</i></h2>
            <div class="card-content">
              <h5 class="center"><?php echo $children[1]->title; ?></h5>

              <p class="light"><?php custom_echo($children[1]->body, 200); ?></p>
            </div>  </div>
          </div>
        </div>

        <div class="col s4">
          <div class="card small">
            <div class="icon-block">
              <h2 class="center brown-text"><i class="material-icons">settings</i></h2>
              <div class="card-content">
                <h5 class="center"><?php echo $children[0]->title; ?></h5>

                <p class="light"><?php custom_echo($children[0]->body, 200); ?></p>
              </div>  </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

Answer 1

It is because you have the class small added to your cards. Remove that class and the cards will resize with your content. When working with Materialize cards, the classes small, medium and large all limit the height of the card, no matter the content.

Also, to get a more responsive look, you should think about changing your col classes up to look something like this, and add a container div, which helps you center and contain your content:

<div class="container">
 <div class="row">
  <div class="col s12 m4">
   <div class="card">
    <div class="icon-block">
      <h2 class="center brown-text"><i class="material-icons">flash_on</i></h2>
      <div class="card-content">
        <h5 class="center"><?php echo $children[2]->title; ?></h5>

        <p class="light"><?php custom_echo($children[2]->body, 200); ?></p>
      </div>  
     </div>
    </div>
   </div>

  <div class="col s12 m4">
    <div class="card">
      <div class="icon-block">
        <h2 class="center brown-text"><i class="material-icons">group</i></h2>
        <div class="card-content">
          <h5 class="center"><?php echo $children[1]->title; ?></h5>

          <p class="light"><?php custom_echo($children[1]->body, 200); ?></p>
        </div>  
       </div>
      </div>
     </div>

    <div class="col s12 m4">
      <div class="card">
        <div class="icon-block">
          <h2 class="center brown-text"><i class="material-icons">settings</i></h2>
          <div class="card-content">
            <h5 class="center"><?php echo $children[0]->title; ?></h5>

            <p class="light"><?php custom_echo($children[0]->body, 200); ?></p>
          </div>  
         </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

Try putting the .icon-block div inside a .card-content. If the problem still persists try getting rid of the .icon-block class just to see how the cards react without it.

Using a div with the class .card-content will give your card padding of 20px evenly around the all the content inside, and an overlflow:hidden. This should give structure to your card.

<div class="row">
  <div class="col s4">
    <div class="card ">
      <!-- card-content- gives padding and overflow hidden to the content inside -->
      <div class="card-content">
        <div class="icon-block">
          <h2 class="center brown-text"><i class="material-icons medium">flash_on</i></h2>
          <div class="card-content">
            <h5 class="center"><?php echo $children[2]->title; ?></h5>

            <p class="light"><?php custom_echo($children[2]->body, 200); ?></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Also as the screen gets smaller in size you may want to have the cards adjust to medium and small devices, instead of having 3 cards in a row on small and medium devices, which is why the text gets bunched and becomes not so user friendly. You could do something like this to always keep the width of the cards very close. The only downside is if you don't want the cards to stack as it gets smaller.

<div class="row">
  <!-- notice columns for each device size - small - medium -large -->
  <div class="col s10 offset-s1 m6 l4">
    <div class="card">
      <div class="card-content">
        <div class="icon-block">
          <!-- I changed the size of the icon to .medium -->
          <!-- Sizes you can use .tiny .smal .medium .large -->
          <h2 class="center brown-text"><i class="material-icons medium">flash_on</i></h2>
          <!-- give the card-title class to your titles -->
          <div class="card-title">
            <h5 class="center">Title</h5>
          </div>
          <p class="light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie placerat diam, eu dignissim massa aliquam eget. Proin nunc mauris, convallis ut felis rutrum, tempor pharetra magna. Fusce at sollicitudin neque, in mollis quam. Etiam finibus
            a erat rutrum pellentesque.</p>
        </div>
      </div>
    </div>
  </div>
  <!-- notice columns for each device size - small - medium -large -->
  <div class="col s10 offset-s1 m6 l4">
    <div class="card ">
      <div class="card-content">
        <div class="icon-block">
          <!-- I changed the size of the icon to .medium -->
          <!-- Sizes you can use .tiny .smal .medium .large -->
          <h2 class="center brown-text"><i class="material-icons medium">group</i></h2>
          <!-- give the card-title class to your titles -->
          <div class="card-title">
            <h5 class="center">Title</h5>
          </div>
          <p class="light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie placerat diam, eu dignissim massa aliquam eget. Proin nunc mauris, convallis ut felis rutrum, tempor pharetra magna. Fusce at sollicitudin neque, in mollis quam. Etiam finibus
            a erat rutrum pellentesque.</p>

        </div>
      </div>
    </div>
  </div>
  <!-- notice columns for each device size - small - medium -large -->
  <!-- 0n medium size it offsets this card to center it on the next row keeping all cards the same size no matter the row -->
  <div class="col s10 offset-s1 m6 offset-m3 l4">
    <div class="card ">
      <div class="card-content">
        <div class="icon-block">
          <!-- I changed the size of the icon to .medium -->
          <!-- Sizes you can use .tiny .smal .medium .large -->
          <h2 class="center brown-text"><i class="material-icons medium">settings</i></h2>
          <!-- give the card-title class to your titles -->
          <div class="card-title">
            <h5 class="center">Title</h5>
          </div>
          <p class="light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie placerat diam, eu dignissim massa aliquam eget. Proin nunc mauris, convallis ut felis rutrum, tempor pharetra magna. Fusce at sollicitudin neque, in mollis quam. Etiam finibus
            a erat rutrum pellentesque.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Working Example

If the problem still persists update your question with the your css.