Продукты WooCommerce только в двух колонках на смартфоне?

Question

Я хочу, чтобы мой магазин Woocommerce показывал мои продукты в магазине в два ряда, когда пользователь просматривает магазин по смартфону. В настоящее время показывает все продукты один ниже другого. Чтобы показать вам, что я имею в виду:

В настоящее время:

и как я хочу это сделать:

Я где-то нашел эту функцию, но как заставить работать только для смартфонов?

add_filter( 'loop_shop_columns', 'wc_loop_shop_columns', 1, 10 );

/*
* Return a new number of maximum columns for shop archives
* @param int Original value
* @return int New number of columns
*/
function wc_loop_shop_columns( $number_columns ) {
    return 2;
}

РЕДАКТИРОВАТЬ:

Я нашел этот CSS, и когда вставка в Инспектор CSS работает, как должно быть, но когда вставить это в пользовательский CSS:

@media (max-width: 480px)  {

.entry-content .products li {
 float: left;
  width: 50%;
  }
}

Но похоже не вносит никаких изменений.. Что я делаю не так?

Заранее спасибо!

Answer 1

Это решило мою проблему, и теперь выглядит отлично для любого смартфона:

@media (max-width: 480px)  {

.entry-content .products li {
 float: left;
  width: 50%;
 }
}