Search code examples
cssmaterializeresponsive

why padding not working in cards

i am newbie to web development and i am working on materialize cards.It is working correctly in laptop but when i try to run it in iPad the cards are getting overlap.

.container-fluid {
  margin-top: 500px;
  /*
    padding-left: 100px;
    padding-right: 100px;
*/
}

.card-reveal {
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.7) !important;
}

div.card-reveal span.card-title {
  color: #ffffff !important;
}

.card {
  width: 280px;
  height: 360px;
  z-index: 5 background-color: blue;
}

#card-img {
  height: 200px;
}

.card-content {
  margin-top: -17px;
  color: black;
}

.card-action {
  margin-top: 38px;
}
<html>

<head>
  <!--Import Google Icon Font-->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!--Import materialize.css-->
  <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" />
  <!--Let browser know website is optimized for mobile-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="css/stackcss.css">
</head>

<body>

  <div class="container-fluid">
    <div class="row">

      <div class="col m3">
        <div class="card hover-reveal sticky-action z-depth-2">
          <div class="card-image waves-effect waves-block waves-light">
            <img id="card-img" class="activator z-depth-5" src="http://images.media-allrecipes.com/userphotos/720x405/1889670.jpg">
          </div>

          <div id="thumbnail" class="z-depth-5"></div>

          <div class="card-content">
            <p><a href="#">Card Title</a><i class="material-icons right">more_vert</i></p>
            <!--<span class="card-title activator grey-text text-darken-4 ">THis is a link</span>-->
          </div>

          <div class="card-action">
            <a href="#!" id="card-parti" class="btn waves-effect waves-teal">VIEW</a>
          </div>

          <div class="card-reveal">
            <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
            <p>Here is some more information about this product that is only revealed once clicked on.</p>
          </div>

        </div>
      </div>

      <div class="col m3">
        <div class="card hover-reveal sticky-action z-depth-2">
          <div class="card-image waves-effect waves-block waves-light">
            <img id="card-img" class="activator z-depth-5" src="http://images.media-allrecipes.com/userphotos/720x405/1889670.jpg">
          </div>

          <div id="thumbnail" class="z-depth-5"></div>
          <div class="card-content">
            <p><a href="#">Card Title</a><i class="material-icons right">more_vert</i></p>
            <!--<span class="card-title activator grey-text text-darken-4 ">THis is a link</span>-->
          </div>

          <div class="card-action">
            <a href="#!" id="card-parti" class="btn waves-effect waves-teal">VIEW</a>
          </div>

          <div class="card-reveal">
            <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
            <p>Here is some more information about this product that is only revealed once clicked on.</p>
          </div>
        </div>
      </div>

      <!--Import jQuery before materialize.js-->
      <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
      <script type="text/javascript" src="js/materialize.min.js"></script>

      <script src="js/matjs.js"></script>

</body>

</html>

card in ipad

Solution

  • You are trying to have four cards in a line, each of the cards is 280px wide, and that makes it 1120px of total width. In addition, you have 50px of left and right margins (.container-fluid), which will add a 100px to the total width. Eventually you are going to have some space between those cards, so add another hundred. 1320px of total width for this section is a minimum that will allow you to have four of these cards in a line. According to the Materialize documentation the .m3 class that you’ve assigned to your cards will keep all these cards in a .row in a single line up until your screen resolution greater than 600px wide, otherwise all cards will be rearranged to fill multiple lines.

    Basic on what materialize is offering you can change .m3 classes to .xl3 and thereby buy another 600px. But your 1320px section is still be wider than 1200px for .xl class, so you may consider to reduce .container-fluid’s left and right margins and/or reduce card’s width.