1

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

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

narrow

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>
Billy Batson
  • 104
  • 2
  • 11

2 Answers2

2

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>
Leeland Miller
  • 70
  • 6
  • not using the large class somewhat fixes the problem, however the card height is now dependent on the content. So if I have a card with less than 200 characters that card will be shorter than others. Is there a way to make the height fixed with a minimum value? otherwise I will probably have to add additional characters in php – Billy Batson Jul 12 '16 at 15:27
  • I think if you want all cards to be the same height, you'd have to set a fixed height to the cards. then with your `card-content` div, you could set a fixed height for it as well so that it nests in the card correctly, and then finally set and `overflow: scroll` to the paragraph inside `card-content` – Leeland Miller Aug 02 '16 at 07:30
1

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.

Gorgon_Union
  • 563
  • 2
  • 8
  • 24