Почему мои DIVs идут друг на друга?

Question

Ссылка на мой сайт. Go на любой странице браслетов и увидеть сбой, особенно на телефоне. Дисплеи продукта будут друг в друге. Единственное, что странно, если вы обновите sh страницу, она перейдет в нормальное состояние ... У кого-нибудь есть предложения, пожалуйста, дайте мне знать! Я работал над этим последние несколько недель, и это, кажется, единственная ошибка. Кто-то на подобном форуме поручил мне сделать кое-что еще, что все еще даже не работало ...

.product {
  width: calc(100%/4 - 40px);
  margin-bottom: 59px;
  position: relative;
  margin: 0 20px;
}

.product_image {
  width: 100%;
}

.product_image img {
  max-width: 100%;
}

.product_grid {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 -20px;
}

.product_content {
  width: 100%;
  padding-top: 36px;
  padding-bottom: 38px;
}

.product_title a {
  font-size: 18px;
  font-weight: 500;
  color: #1b1b1b;
  line-height: 1.1;
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}

.product_title a:hover {
  color: #e95a5a;
}

.product_price {
  font-size: 16px;
  font-weight: 500;
  color: #6c6a74;
  line-height: 0.75;
  margin-top: 13px;
}

.product_extra {
  position: absolute;
  top: 0;
  left: 54px;
  width: 66px;
  height: 36px;
  text-align: center;
  -webkit-transform-origin: top left;
  -moz-transform-origin: top left;
  -ms-transform-origin: top left;
  -o-transform-origin: top left;
  transform-origin: top left;
  transform: rotate(90deg);
}

.product_extra a {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 36px;
}

<div class="row">
  <div class="col">

    <div class="product_grid">

      <!-- Product -->
      <div class="product">
        <div class="product_image"><img src="Products/spectrum/details_1.png" alt="Spectrum"></div>
        <div class="product_content">
          <div class="product_title"><a href="spectrum.html">Spectrum</a></div>
          <div class="product_price">$8.99</div>
        </div>
      </div>

      <!-- Product -->
      <div class="product">
        <div class="product_image"><img src="Products/wave_black/details_1.png" alt="Black Wave"></div>
        <div class="product_content">
          <div class="product_title"><a href="wave_black.html">Black Wave Charm</a></div>
          <div class="product_price">$6.99</div>
        </div>
      </div>
    </div>
  </div>

РЕДАКТИРОВАТЬ, ПРОБЛЕМА:

ПРЕДПОЛАГАЕТСЯ НА СМОТРЕТЬ НРАВИТСЯ:

Answer 1

.product {
  margin-bottom: 60px;
  background-color: #ededed;
}



.product_content {
  padding-top: 36px;
  padding-bottom: 38px;
}

.product_title a {
  font-size: 18px;
  font-weight: 500;
  color: #1b1b1b;
  line-height: 1.1;
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}

.product_title a:hover {
  color: #e95a5a;
}

.product_price {
  font-size: 16px;
  font-weight: 500;
  color: #6c6a74;
  line-height: 0.75;
  margin-top: 13px;
}

.product_extra {
  position: absolute;
  top: 0;
  left: 54px;
  width: 66px;
  height: 36px;
  text-align: center;
  -webkit-transform-origin: top left;
  -moz-transform-origin: top left;
  -ms-transform-origin: top left;
  -o-transform-origin: top left;
  transform-origin: top left;
  transform: rotate(90deg);
}

.product_extra a {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 36px;
}

<link href="https://jewelbeadsbracelets.com/styles/bootstrap4/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
    <!-- Product -->
      <div class="product">
        <div class="product_image"><img src="https://www.freevectorpro.com/wp-content/uploads/2018/06/Audi-logo.jpg" alt="Spectrum" class="img-fluid"></div>
        <div class="product_content">
          <div class="product_title"><a href="spectrum.html">Spectrum</a></div>
          <div class="product_price">$8.99</div>
        </div>
      </div>
  </div>
 <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
      <!-- Product -->
      <div class="product">
        <div class="product_image"><img src="https://www.freevectorpro.com/wp-content/uploads/2018/06/Audi-logo.jpg" alt="Black Wave"  class="img-fluid"></div>
        <div class="product_content">
          <div class="product_title"><a href="wave_black.html">Black Wave Charm</a></div>
          <div class="product_price">$6.99</div>
        </div>
      </div>
  </div>
 <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
      <!-- Product -->
      <div class="product">
        <div class="product_image"><img src="https://www.freevectorpro.com/wp-content/uploads/2018/06/Audi-logo.jpg" alt="Black Wave"  class="img-fluid"></div>
        <div class="product_content">
          <div class="product_title"><a href="wave_black.html">Black Wave Charm</a></div>
          <div class="product_price">$6.99</div>
        </div>
      </div>
  </div>
 <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
      <!-- Product -->
      <div class="product">
        <div class="product_image"><img src="https://www.freevectorpro.com/wp-content/uploads/2018/06/Audi-logo.jpg" alt="Black Wave"  class="img-fluid"></div>
        <div class="product_content">
          <div class="product_title"><a href="wave_black.html">Black Wave Charm</a></div>
          <div class="product_price">$6.99</div>
        </div>
      </div>
  </div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
      <!-- Product -->
      <div class="product">
        <div class="product_image"><img src="https://www.freevectorpro.com/wp-content/uploads/2018/06/Audi-logo.jpg" alt="Black Wave"  class="img-fluid"></div>
        <div class="product_content">
          <div class="product_title"><a href="wave_black.html">Black Wave Charm</a></div>
          <div class="product_price">$6.99</div>
        </div>
      </div>
  </div>
  </div>

На вашем сайте используется bootstrap, поэтому вы можете легко использовать bootstrap сетку и отображать продукт в строках и столбцах. Вам не нужно создавать сетку самостоятельно. Используйте bootstrap классы для настройки сетки в соответствии с размером экрана. чек https://getbootstrap.com/docs/4.0/layout/grid/

Answer 2

Я сделал всего несколько модификаций, но кажется, что ваш код работает почти из коробки. Я в основном изменил поля в сетке и карточке товара.

Это то, что вы ищете?

.product-grid {
  display: flex;
  flex-wrap: wrap;
  margin-left: -20px;
}

.product {
  width: calc(100%/4 - 20px);
  margin-bottom: 60px;
  position: relative;
  margin-left: 20px;
  background-color: #ededed;
}

.product_image {
  width: 100%;
}

.product_image img {
  max-width: 100%;
}

.product_content {
  width: 100%;
  padding-top: 36px;
  padding-bottom: 38px;
}

.product_title a {
  font-size: 18px;
  font-weight: 500;
  color: #1b1b1b;
  line-height: 1.1;
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}

.product_title a:hover {
  color: #e95a5a;
}

.product_price {
  font-size: 16px;
  font-weight: 500;
  color: #6c6a74;
  line-height: 0.75;
  margin-top: 13px;
}

.product_extra {
  position: absolute;
  top: 0;
  left: 54px;
  width: 66px;
  height: 36px;
  text-align: center;
  -webkit-transform-origin: top left;
  -moz-transform-origin: top left;
  -ms-transform-origin: top left;
  -o-transform-origin: top left;
  transform-origin: top left;
  transform: rotate(90deg);
}

.product_extra a {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 36px;
}

<div class="row">
  <div class="col">

    <div class="product-grid">

      <!-- Product -->
      <div class="product">
        <div class="product_image"><img src="https://www.freevectorpro.com/wp-content/uploads/2018/06/Audi-logo.jpg" alt="Spectrum"></div>
        <div class="product_content">
          <div class="product_title"><a href="spectrum.html">Spectrum</a></div>
          <div class="product_price">$8.99</div>
        </div>
      </div>

      <!-- Product -->
      <div class="product">
        <div class="product_image"><img src="https://www.freevectorpro.com/wp-content/uploads/2018/06/Audi-logo.jpg" alt="Black Wave"></div>
        <div class="product_content">
          <div class="product_title"><a href="wave_black.html">Black Wave Charm</a></div>
          <div class="product_price">$6.99</div>
        </div>
      </div>
      
      <!-- Product -->
      <div class="product">
        <div class="product_image"><img src="https://www.freevectorpro.com/wp-content/uploads/2018/06/Audi-logo.jpg" alt="Black Wave"></div>
        <div class="product_content">
          <div class="product_title"><a href="wave_black.html">Black Wave Charm</a></div>
          <div class="product_price">$6.99</div>
        </div>
      </div>
      
      <!-- Product -->
      <div class="product">
        <div class="product_image"><img src="https://www.freevectorpro.com/wp-content/uploads/2018/06/Audi-logo.jpg" alt="Black Wave"></div>
        <div class="product_content">
          <div class="product_title"><a href="wave_black.html">Black Wave Charm</a></div>
          <div class="product_price">$6.99</div>
        </div>
      </div>
      
      <!-- Product -->
      <div class="product">
        <div class="product_image"><img src="https://www.freevectorpro.com/wp-content/uploads/2018/06/Audi-logo.jpg" alt="Black Wave"></div>
        <div class="product_content">
          <div class="product_title"><a href="wave_black.html">Black Wave Charm</a></div>
          <div class="product_price">$6.99</div>
        </div>
      </div>
    </div>
  </div>