Уменьшите размер экрана и управляйте полями

avatar
BruceyBandit
8 августа 2021 в 18:02
37
1
1

У меня возникла проблема с адаптивными полями. Если вы посмотрите на этот сайт в качестве примера: https://uk.balibodyco.com/collections/suncare

Если я уменьшу размер экрана, вы увидите, что поля уменьшатся, а затем количество столбцов уменьшится с 4 до 2.

С моим он делает то же самое, но проблема в том, что поле не меняется до того, как оно вернется к 2 столбцам. Таким образом, миниатюры в каждом столбце уменьшаются, потому что он сохраняет 7,5% полей с обеих сторон.

Кто-нибудь знает, что мне нужно сделать, чтобы исправить это, чтобы соответствовать тому, как это делает Bali Body?

Пример кода ниже:

<div class="post_content">
        <a class="" href="https://balancecoffee.co.uk/stage/product/genji-challa-ethiopian-single-origin/">
        </a><h3><a class="" href="https://balancecoffee.co.uk/stage/product/genji-challa-ethiopian-single-origin/"></a>
        <a href="https://balancecoffee.co.uk/stage/product/genji-challa-ethiopian-single-origin/">Genji Challa – Ethiopian Single Origin</a></h3> 
        
        <a href="https://balancecoffee.co.uk/stage/product/genji-challa-ethiopian-single-origin/#respond"><div class="star-rating"><span style="width:0%"></span></div></a>
        <span class="tastenotes">Nectarine, blood orange, redcurrant</span>
  ...
  </div>

  <div class="post_content">
        <a class="" href="https://balancecoffee.co.uk/stage/product/genji-challa-ethiopian-single-origin/">
        </a><h3><a class="" href="https://balancecoffee.co.uk/stage/product/genji-challa-ethiopian-single-origin/"></a>
        <a href="https://balancecoffee.co.uk/stage/product/genji-challa-ethiopian-single-origin/">Genji Challa – Ethiopian Single Origin</a></h3> 
        
        <a href="https://balancecoffee.co.uk/stage/product/genji-challa-ethiopian-single-origin/#respond"><div class="star-rating"><span style="width:0%"></span></div></a>
        <span class="tastenotes">Nectarine, blood orange, redcurrant</span>
  ...
  </div>
  
  <div class="post_content">
        <a class="" href="https://balancecoffee.co.uk/stage/product/genji-challa-ethiopian-single-origin/">
        </a><h3><a class="" href="https://balancecoffee.co.uk/stage/product/genji-challa-ethiopian-single-origin/"></a>
        <a href="https://balancecoffee.co.uk/stage/product/genji-challa-ethiopian-single-origin/">Genji Challa – Ethiopian Single Origin</a></h3> 
        
        <a href="https://balancecoffee.co.uk/stage/product/genji-challa-ethiopian-single-origin/#respond"><div class="star-rating"><span style="width:0%"></span></div></a>
        <span class="tastenotes">Nectarine, blood orange, redcurrant</span>
  ...
  </div>
  
  <div class="post_content">
        <a class="" href="https://balancecoffee.co.uk/stage/product/genji-challa-ethiopian-single-origin/">
        </a><h3><a class="" href="https://balancecoffee.co.uk/stage/product/genji-challa-ethiopian-single-origin/"></a>
        <a href="https://balancecoffee.co.uk/stage/product/genji-challa-ethiopian-single-origin/">Genji Challa – Ethiopian Single Origin</a></h3> 
        
        <a href="https://balancecoffee.co.uk/stage/product/genji-challa-ethiopian-single-origin/#respond"><div class="star-rating"><span style="width:0%"></span></div></a>
        <span class="tastenotes">Nectarine, blood orange, redcurrant</span>
  ...
  </div>

CSS:

.woocommerce-page ul.products li.product.column-1_4 {
    width: 25%;
}

.woocommerce ul.products, .woocommerce-page ul.products {
    margin-right: -30px;
    margin-bottom: 0;
}

.archive .slider_boxed, 
.content_wrap,
.archive .content_container{
width:85%;
margin: 0 auto;
}
Источник
PHP Geek
9 августа 2021 в 05:23
0

Я предлагаю сделать его идеально отзывчивым, используя сетку bootstrap, пройдите через getbootstrap.com/docs/4.0/layout/grid

Ответы (1)

avatar
Usama Jalal
8 августа 2021 в 19:32
0

В случае с bali body они создали класс с именем grid, который содержит 4 строки на рабочем столе и 2 на меньших экранах. вы можете легко сделать это с помощью начальной загрузки, создав 4 столбца на больших экранах (col-md-4) и 2 на меньших (col-sm-2). поэтому, если вы хотите изменить маржу на небольших устройствах, рассмотрите возможность использования медиа-запроса css для небольших экранов. вы можете написать что-то вроде:

@media only screen and (max-width: 768px)
 .grid {
margin-left: -15px;
}

так что это даст -15px влево. вы можете написать столько свойств css, что это будет работать только на мобильных телефонах и планшетах. просто замените сетку на имя вашего класса (я думаю, в вашем случае это li.product.column-1_4).