Search code examples
cssmaterialize

Grid on large screens showing gap

I'm using Materialize grid but for some reason I'm getting a gap when my grid is on large screens. I was using Bootstrap and Materialize and realised it was a bad idea to use both, so I removed Bootstrap grid and redid it in Materialize grid.

However I'm not sure if it's to do with changing over to Materialize grid as I had the same problem on Bootstrap grid. I may have messed with script tags and link tags in my header and footer so that may have messed something up.

Please see the screenshot below and my code for HTML, CSS, header, footer.

enter image description here

#store {
  padding: 2%;
  background-color: #c8def7;
}

.item-name {
  margin-top: 4%;
  font-size: 1.4rem;
  text-align: left;
}

.item-add {
  margin: auto;
  padding: 10px;
  margin-top: 10px;
  display: block;
  width: 100%;
  background-color: #a8323a;
  font-family: 'Open Sans', sans-serif;
}

.item {
  margin-top: 4%;
  font-family: 'Baloo Tammudu 2', cursive;
  padding: 15px;
  border-radius: 15px;
}

.price {
  color: red;
  text-align: center;
  float: right;
  font-size: 1.4rem;
}

.item-details {
  margin-top: 4%;
  text-align: center;
}

.item-pic {
  width: 100%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="/css/styles.css">

  <!-- Materialize -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

  <script type="text/javascript" src="index.js"></script>

  <!-- Font Awesome -->
  <script defer src="https://use.fontawesome.com/releases/v5.14.0/js/all.js"></script>
  <script defer src="https://use.fontawesome.com/releases/v5.14.0/js/v4-shims.js"></script>

  <!-- Materialize -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Baloo+Tammudu+2:wght@500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Libre+Barcode+128+Text&display=swap" rel="stylesheet">


  <title></title>
</head>

<body>
  <div class="selling-items">
    <div class="row">
      <div class="col m4 l3">
        <div class="item item-1">
          <img class="item-pic item-pic-1" src="images/item-1.jpg" alt="">
          <hr />
          <div class="item-details">
            <span class="item-name">Blue Plaid Shirt</span>
            <span class="price">€23.99</span>
            <button class="item-add btn btn-lg btn-danger blue darken-4" type="button" name="button">View this item</button>
          </div>
        </div>
      </div>

      <div class="col m4 l3">
        <div class="item item-2">
          <img class="item-pic item-pic-2" src="images/item-2.jpg" alt="">
          <hr />
          <div class="item-details">
            <span class="item-name">Blue Plaid Shirt</span>
            <span class="price">€23.99</span>
            <button class="item-add btn btn-lg btn-danger blue darken-4" type="button" name="button">View this item</button>
          </div>
        </div>
      </div>

      <div class="col m4 l3">
        <div class="item item-3">
          <img class="item-pic item-pic-3" src="images/item-3.jpg" alt="">
          <hr />
          <div class="item-details">
            <span class="item-name">Blue Plaid Shirt</span>
            <span class="price">€23.99</span>
            <button class="item-add btn btn-lg btn-danger blue darken-4" type="button" name="button">View this item</button>
          </div>
        </div>
      </div>

      <div class="col m4 l3">
        <div class="item item-4">
          <img class="item-pic item-pic-4" src="images/item-4.jpg" alt="">
          <hr />
          <div class="item-details">
            <span class="item-name">Blue Plaid Shirt</span>
            <span class="price">€23.99</span>
            <button class="item-add btn btn-lg btn-danger blue darken-4" type="button" name="button">View this item</button>
          </div>
        </div>
      </div>

      <div class="col m4 l3">
        <div class="item item-5">
          <img class="item-pic item-pic-5" src="images/item-5.jpg" alt="">
          <hr />
          <div class="item-details">
            <span class="item-name">Blue Plaid Shirt</span>
            <span class="price">€23.99</span>
            <button class="item-add btn btn-lg btn-danger blue darken-4" type="button" name="button">View this item</button>
          </div>
        </div>
      </div>

      <div class="col m4 l3">
        <div class="item item-6">
          <img class="item-pic item-pic-6" src="images/item-6.jpg" alt="">
          <hr />
          <div class="item-details">
            <span class="item-name">Blue Plaid Shirt</span>
            <span class="price">€23.99</span>
            <button class="item-add btn btn-lg btn-danger blue darken-4" type="button" name="button">View this item</button>
          </div>
        </div>
      </div>

      <div class="col m4 l3">
        <div class="item item-7">
          <img class="item-pic item-pic-7" src="images/item-7.jpg" alt="">
          <hr />
          <div class="item-details">
            <span class="item-name">Blue Plaid Shirt</span>
            <span class="price">€23.99</span>
            <button class="item-add btn btn-lg btn-danger blue darken-4" type="button" name="button">View this item</button>
          </div>
        </div>
      </div>

      <div class="col m4 l3">
        <div class="item item-8">
          <img class="item-pic item-pic-8" src="images/item-8.jpg" alt="">
          <hr />
          <div class="item-details">
            <span class="item-name">Blue Plaid Shirt</span>
            <span class="price">€23.99</span>
            <button class="item-add btn btn-lg btn-danger blue darken-4" type="button" name="button">View this item</button>
          </div>
        </div>
      </div>
    </div>

  </div>
</body>

Solution

  • This case needs to standardize the height of the image elements

    solution:

    edit height of images on photos editor like as photoshop, paint

    ===================== OR ======================

    css:

    .item-pic {height: 20vw}

    ===================== OR ======================

    js:

    let _height = 0;
$('.item-pic').each(function () {
    if ($(this).height() > _height) {
        _height = $(this).height();
    }
});
$('.item-pic').height(_height);

    example: https://codepen.io/Em-An/pen/ExKLZNG