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.
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.
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.