Проблема с отображением колонок товара на мобильном, как исправить?

Question

[BRomplat]

Есть проблема отображения товара на главной странице и в каталоге на мобильных устройствах. В настройках темы выставляю 2 колонки на мобильном, а отображается только одна.

Если ставить 1 колонку, то она в полный размер ставится.

Если ставить 3 колонки на мобильном, то показывается 2, но они не посередине а слева. Подобно как и в случае с 2мя колонками правую что-то смещает. Подобная ситуация дублируется на главной странице.

Единственное место где всё корректно отображается, это карточка товара - раздел "Похожие товары"

Тема Astra.
Не могу понять в чём проблема, нашёл вариант с исправлением файла \wp-content\plugins\woocommerce\assets\css\woocommerce-smallscreen.css
.woocommerce ul.products[class*=columns-] li.product, .woocommerce-page ul.products[class*=columns-] li.product {
width: 100%; (по умолчанию стоит 48%)
} из этой темы. Но у меня по умолчанию стоит 100%
Ссылка на сайт
Нужно сделать так, чтобы отображались 2 колонки на мобильном по центру и выровнено по ширине, как на скрине.

Понимаю, что скорее что-то где-то конфликтует, но что конкретно и где не могу понять.

Comments

[Антон Литвиненко]

Например в этом правиле

@media (max-width: 544px)
.woocommerce-page[class*=columns-].columns-3>ul.products li.product:nth-child(2n), .woocommerce-page[class*=columns-].columns-4>ul.products li.product:nth-child(2n), .woocommerce-page[class*=columns-].columns-5>ul.products li.product:nth-child(2n), .woocommerce-page[class*=columns-].columns-6>ul.products li.product:nth-child(2n), .woocommerce[class*=columns-].columns-3>ul.products li.product:nth-child(2n), .woocommerce[class*=columns-].columns-4>ul.products li.product:nth-child(2n), .woocommerce[class*=columns-].columns-5>ul.products li.product:nth-child(2n), .woocommerce[class*=columns-].columns-6>ul.products li.product:nth-child(2n) {
  margin-left: 0;
  clear: right;
}

должен быть margin-right: 0, как мне кажется а не то что сейчас

[BRomplat]

Антон Литвиненко, Это в доп стили прописывать или же в файл \wp-content\plugins\woocommerce\assets\css\woocommerce-smallscreen.css?

[Антон Литвиненко]

BRomplat, лучше перебить гдето, например в кастомайзере в дополнительных стилях

[BRomplat]

Антон Литвиненко,
Походу я не правильно понял или это не сработало.

@media (max-width: 544px)
.woocommerce-page[class*=columns-].columns-3>ul.products li.product:nth-child(2n), .woocommerce-page[class*=columns-].columns-4>ul.products li.product:nth-child(2n), .woocommerce-page[class*=columns-].columns-5>ul.products li.product:nth-child(2n), .woocommerce-page[class*=columns-].columns-6>ul.products li.product:nth-child(2n), .woocommerce[class*=columns-].columns-3>ul.products li.product:nth-child(2n), .woocommerce[class*=columns-].columns-4>ul.products li.product:nth-child(2n), .woocommerce[class*=columns-].columns-5>ul.products li.product:nth-child(2n), .woocommerce[class*=columns-].columns-6>ul.products li.product:nth-child(2n) {
  margin-right: 0;
  clear: right;
}

[BRomplat]

Антон Литвиненко, нашёл вот этот кусок кода

Меняю margin-right: с 20px на 10px и всё становится на свои места. Но не могу понять как это в стилях прописать правильно или где в коде это найти чтобы исправить.

[Антон Литвиненко]

BRomplat, Полностью скопировать все правило и прописать его например в кастомайзере в дополнительных стилях, я ж уже говорил

[BRomplat]

Антон Литвиненко, это так должно выглядеть?

Скопировал код поменял margin-right: 20px на 10px и ничего не произошло(изменения сохранял)

[Антон Литвиненко]

BRomplat, в каскаде стилей смотрите вывелось ли вообще то что написали вы, если оно вывелось под базовыми значениями, значит нужно усилить селектор