Один стовпець на мобільному телефоні замість двох стовпчиків - css, wordpress, мобільний, woocommerce, responsive

Я хочу показувати продукти на сторінках категорій продуктів в одному стовпці під час мобільного телефону. Але це показує 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%;
}

}

Дякую.

Відповіді:

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

@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%;
}

Будь ласка, спробуйте наступні css.Here ви пропустили "" в колі і u використовували стовпці замість col

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