curt
curt

Reputation: 4592

Materialize Card Makes Image Full Width

I set up a stand alone web page to try out materialize. I followed the CDN set up example from the materialize site and added a horizontal card using their example as well. The image I used is 150x150px. The resulting page makes the image the full width of the screen (iMac) and displays the text below. I rooted around for example code and found that there is a container class, which is not metioned on the site that I could see. When I added that, the card image filled the full width of the container. I added a width to the image class. It had no effect. I added the class="responsive-img" to the image. It also had no effect. This is my original code

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Django Materialize Sandbox</title>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
</head>
 <body>
    <div class="row">
      <div class="col s12 m7">
        <h2 class="header">Horizontal Card</h2>
        <div class="card horizontal">
            <div class="card-image">
                <img src="https://via.placeholder.com/150

C/O https://placeholder.com/small_image.png">
        </div>
        <div class="card-stacked">
            <div class="card-content">
                <p>I am a very simple card. I am good at containing small bits of information.</p>
            </div>
            <div class="card-action">
                <a href="#">This is a link</a>
            </div>
        </div>
     </div>
   </div>
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript"                    src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js">    </script>
</body>
</html>

Is there something else I missed? Is there better documentation? I can't find any other than the materialize site.

Fix

When I added @Doughballs fix, it still didn't work. That's when I decided check the version of the css I was using. The materialize site was up to 1.0.0. When I changed both version numbers in the header, it worked. I must have gotten my header from another site.

Upvotes: 0

Views: 659

Answers (1)

Sean Doherty
Sean Doherty

Reputation: 2378

Materialize cards get their width from the columns they are in. If you're familiar with the grid system, then it's pretty easy to understand:

col s12 = 100% of containing element (full width)

col s6 = 50%

col s4 = 33%

And so on.

If you use the same markup from the docs, as I have done in this codepen, your cards will be the intended width, with no need to set extra controls on the images inside.

<div class="row">
    <div class="col s12 m7">
      <div class="card">
        <div class="card-image">
          <img src="images/sample-1.jpg">
          <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>

This code is taken from the documentation.

If you're having issues, it's likely from stray markup.

EDIT:

So I created a codepen using the horizontal example from the docs. And you are correct - they are missing a row wrapper from the markup. In any case, all grid based layout systems use the same structure: cols live in rows, rows live in containers.

I would say the horizontal card is not as flexible/responsive as the standard card. At some narrower sizes a landscape image may have white space underneath, and at very wide sizes a portrait image will make the card too tall to be practical. So a little common sense is needed to make sure your images display correctly.

Horizontal codepen

Upvotes: 1

Related Questions