Изменить количество отображения блоков товаров

Если есть потребность изменить количество отображения товара в каталоге, необходимо обновить стили отображения карточек товара. Для этого в файл user.css добавить код, который обновит сетку вывода (после обновления файла, необходимо очищать кеш с помощью комбинации клавиш CTRL+F5).

/** Стандартные мониторы **/
@media (min-width: 1200px) {
  /** Без боковой панели **/
  .adaptive {
    width: 20%;
 }
  /** С боковой панелью **/
  .adaptive-filter {
    width: 25%;
 }
}
/** Небольшие экраны ПК **/
@media (min-width: 992px) {
  /** Без боковой панели **/
  .adaptive {
    width: 25%;
 }
  /** С боковой панелью **/
  .adaptive-filter {
    width: 33.3333333333%;
 }
}

/* Маленькие экраны и планшеты */
@media (min-width: 768px) {
  /** Без боковой панели **/
  .adaptive {
    width: 33.3333333333%;
 }
  /** С боковой панелью **/
  .adaptive-filter {
    width: 50%;
 }
}
/** Телефон и смартфон **/
@media (max-width: 767px) {
  /** Без боковой панели **/
  .adaptive {
    width: 50%;
 }
  /** С боковой панелью **/
  .adaptive-filter {
    width: 50%;
 }
}

Как все это работает?

Перед вами представлена базовая сетка, изменив значение для каждого устройства, можно изменить количество отображаемого товара ширине. За базовую сетку берется значение 100%, исходя из этого расчитывается ширина блока.

Например:

Нужно выводить 3 товар в ряд без панели и 2 товара в ряд с панелью. 100/3 = 33.3333333% и 100/2 = 50% - эти значения прописываются для каждого типа экрана и устройства. Причем, если необходимо для ПК выводиться разные значения, эти разные проценты надо расчитать отдельно для каждой сетки.