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