Materialize display cards in one line

html css material-design materialize

25,576

Solution 1

The problem is caused by wrapping all your cards inside a narrow parent <div class="col s12 m4">it is logical for elements to wrap when the container has limited width.

To fix this, you should wrap each card in a m4 column, like so:

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>

<div class="row">
  <div class="col m4">
    <div class="card">
      <div class="card-image">
        <img src="http://www.ilikewallpaper.net/ipad-wallpapers/download/2268/Square-Pattern-ipad-wallpaper-ilikewallpaper_com.jpg">
        <span class="card-title" style="width:100%; background: rgba(0, 0, 0, 0.5);">Sample1</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 class="col m4">
    <div class="card">
      <div class="card-image">
        <img src="http://www.ilikewallpaper.net/ipad-wallpapers/download/2268/Square-Pattern-ipad-wallpaper-ilikewallpaper_com.jpg">
        <span class="card-title" style="width:100%; background: rgba(0, 0, 0, 0.5);">Sample2</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>

<div class="fixed-action-btn click-to-toggle" style="bottom: 45px; right: 24px;">
  <a class="btn-floating btn-large red">
    <i class="large material-icons">menu</i>
  </a>
  <ul>
    <li><a class="btn-floating red" class="fbtn" href="test.html"><i class="material-icons">home</i></a></li>
    <li><a class="btn-floating yellow darken-1" class="fbtn" href="#"><i class="material-icons">work</i></a></li>
    <li><a class="btn-floating green" class="fbtn" href="about.html"><i class="material-icons">account_circle</i></a></li>
    <li><a class="btn-floating blue" class="fbtn" href="contact.html"><i class="material-icons">speaker_notes</i></a></li>
  </ul>
</div>
<div class="clear" style="clear:both; height: 100px;">
</div>
<footer class="ui-footer" style="background:#fafafa; width:100%; position:fixed; z-index:99; clear:both;">
  <div class="container">
    <p>&copy; Yogesh Singh Choudhary</p>
  </div>
</footer>

jsFiddle: https://jsfiddle.net/azizn/6aLaoecg/

Edit: to center the columns horizontally, you can turn them into inline-blocks then disable their float. The parent must have text-align: center:

CSS

.center-cols > .col {
  float:none; /* disable the float */
  display: inline-block; /* make blocks inline-block */
  text-align: initial; /* restore text-align to default */
}

HTML

<div class="row center-cols center-align">
  <!-- card -->
  <div class="col m4">
    <div class="card">
    ...
   </div>
  <!-- card -->
  <div class="col m4">
    <div class="card">
    ...
   </div>
</div>

jsFiddle: https://jsfiddle.net/azizn/3kpj8hup/

Solution 2

The thing is that the width of your row div is consuming the complete width of your screen. So even if you change the display property to inline, even then there is no space for the next row div to be placed in the same line. So decreasing the width does the work.

Following is the solution if you want to keep TWO separate ROW DIVS. Else you can simply have one row div and both the col s12 m4 divs inside it.

Add the following STYLE changes to both your row divs and to both your col s12 m4 divs and it should work the way you want it to.

If you want to increase the spacing between the two cards, simply increase the margin-right value in styles.

<div class="row" style="width:420px; left:20px; display: inline-block; margin-right: 40px;">
  <div class="col s12 m4" style="width:100%;">

25,576

Author by

Yogesh Singh Choudhary

I design.

Updated on January 12, 2020

Comments

Yogesh Singh Choudhary over 4 years

I'm using Materialize CSS cards, which can be found here: http://materializecss.com/cards.html

I created the cards but the problem is that the cards aren't shown in one line. I want them responsive, so if page is wide enough to show two cards in one line, it should show them but in my case they aren't showing in one line.

I tried all types of display styles namely: inline, inline-block, table, table-cell, run-in, block, etc. but nothing showed them in one line.

Here is my code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet" media="screen,projection"/>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width" name="viewport">
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <!--Let browser know website is optimized for mobile-->
    <title>My Works</title>
  </head>
  <body>
    <div class="row">
      <div class="col s12 m4">
        <div class="card" style="display:run-in;">
          <div class="card-image">
            <img src="http://www.ilikewallpaper.net/ipad-wallpapers/download/2268/Square-Pattern-ipad-wallpaper-ilikewallpaper_com.jpg">
            <span class="card-title" style="width:100%; background: rgba(0, 0, 0, 0.5);">Sample1</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>
    <div class="row">
      <div class="col s12 m4">
        <div class="card" style="display:run-in;">
          <div class="card-image">
            <img src="http://www.ilikewallpaper.net/ipad-wallpapers/download/2268/Square-Pattern-ipad-wallpaper-ilikewallpaper_com.jpg">
            <span class="card-title" style="width:100%; background: rgba(0, 0, 0, 0.5);">Sample2</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>
    <!--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>
    <div class="fixed-action-btn click-to-toggle" style="bottom: 45px; right: 24px;">
      <a class="btn-floating btn-large red">
        <i class="large material-icons">menu</i>
      </a>
      <ul>
        <li><a class="btn-floating red" class="fbtn" href="test.html"><i class="material-icons">home</i></a></li>
        <li><a class="btn-floating yellow darken-1" class="fbtn" href="#"><i class="material-icons">work</i></a></li>
        <li><a class="btn-floating green" class="fbtn" href="about.html"><i class="material-icons">account_circle</i></a></li>
        <li><a class="btn-floating blue" class="fbtn" href="contact.html"><i class="material-icons">speaker_notes</i></a></li>
      </ul>
    </div>
    <div class="clear" style="clear:both; height: 100px;">
    </div>
    <footer class="ui-footer" style="background:#fafafa; width:100%; position:fixed; z-index:99; clear:both;">
      <div class="container">
        <p>&copy; Yogesh Singh Choudhary</p>
      </div>
    </footer>
  </body>
</html>

Yogesh Singh Choudhary about 8 years

I tried that too. When I remove the second row, the card is shown with 100% width.
Yogesh Singh Choudhary about 8 years

Thank you so much! It finally fixed my problem. BTW, the 'run-in' property was described in a site which I visited to fix this problem but it didn't fixed it. Here's what W3school say about it: "Displays an element as either block or inline, depending on context." Just 1 more thing: "How do I align center those cards"?
Yogesh Singh Choudhary about 8 years

Thank you so much! Problem finally fixed!
Eduardo over 7 years

Thanks very much! Works like a charm!