Одна колонка на мобильном устройстве вместо двух колонок

Я хочу показывать продукты на страницах категорий продуктов в одном столбце на мобильных устройствах. Но он показывает 2 столбца, и это может вызвать проблемы с внешним видом. Я пытался сделать это ниже кода CSS, но это не сработало:

@media only screen and (max-width:460px) {
.woocommerce[class*=columns-] ul.products li.product {
   width: 100%;
 }
}

Где я хочу это;

http://www.e-tamirci.com/tamirci-bul/

Спасибо за вашу помощь.

Я нашел решение, основанное на ответах;

@media all and (max-width:768px){
.woocommerce ul.products li.col-3.product,
.woocommerce-page ul.products li.col-3.product{
    width: 98%;
    margin:1%;
 }

}

Спасибо.


mobile wordpress css woocommerce responsive
person B.Koc    schedule 28.04.2016    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Ваша проблема

@media (max-width: 768px)
.woocommerce ul.products li.col-3.product, .woocommerce-page ul.products li.col-3.product {
    width: 48%;
}

так поменяй на

@media (max-width: 768px)
.woocommerce ul.products li.col-3.product, .woocommerce-page ul.products li.col-3.product {
    width: 100%;
}
person Giacomo Torricelli    schedule 28.04.2016
comment
Попробуйте очистить кеш, потому что это работает :) В противном случае поставьте width: 100% !important; - person Giacomo Torricelli; 28.04.2016
comment
Я сделал это и все так же, даже я попробовал это на проверке мобильности Google, и там тоже самое. - person B.Koc; 28.04.2016

arrow_upward
1
arrow_downward

Вот что у меня сработало в WooCommerce 3.6:

@media (max-width: 768px) {
    .woocommerce ul.products[class*=columns-] li.product,
    .woocommerce-page ul.products[class*=columns-] li.product {
        width: 100%;
    }
}
person Eric    schedule 17.10.2019

arrow_upward
0
arrow_downward

Пожалуйста, попробуйте следующий css. Здесь вы пропустили "" в столбце и использовали столбцы вместо столбца.

@media only screen and (max-width:460px) {
.woocommerce[class*="col-"] ul.products li.product {
   width: 100%;
 }
}
person Tanushree Behera    schedule 28.04.2016
comment
Спасибо, но ничего не изменилось. - person B.Koc; 28.04.2016