Reputation: 4592
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.
Upvotes: 0
Views: 659
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.
Upvotes: 1