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 Inspector中插入时，应该是这样的，但是当将这个插入到自定义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%;
 }
}