title: Woocommerce products in two columns in smartphone only?
body: <p>I want to make my Woocommerce store to show my products in shop in two rows when user browse the shop by smartphone. Currently is showing all products one bellow other. To show you what I mean:</p>
  
  <p>Currently:</p>
  
  <p><a href="https://i.stack.imgur.com/8LckW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8LckW.png" alt="enter image description here"></a></p>
  
  <p>and how I want to make it:</p>
  
  <p><a href="https://i.stack.imgur.com/hVYii.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hVYii.png" alt="enter image description here"></a></p>
  
  <p>I found this function somewhere, but how to make working only for smartphones?</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>EDIT:</p>
  
  <p>I found this css, and when insert in CSS Inspector works as should be, but when insert this into custom CSS:</p>
  
  <pre><code>@media (max-width: 480px)  {
  
  .entry-content .products li {
   float: left;
    width: 50%;
    }
  }
  </code></pre>
  
  <p>But seems not make any changes.. What i do wrong?</p>
  
  <p>Thanks in advance!</p>