Una columna en el móvil en lugar de dos columnas: css, wordpress, mobile, woocommerce, responsive

Quiero mostrar los productos en las páginas de categorías de productos en una columna cuando son móviles. Pero muestra 2 columnas y puede causar problemas de apariencia que intenté debajo del código CSS para hacer eso pero no funcionó:

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

Donde quiero es eso;

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

Gracias por su ayuda.

He encontrado la solución basada en respuestas;

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

}

Gracias.

Respuestas

Tu problema es

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

así que cámbiala a

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

Por favor, intente los siguientes cs. Aquí se perdió "" en col yu usó columnas en lugar de col

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