Two columns mobile version

The padding line goes inside the media query so it only applies to smaller screens. So replace the first snippet with:

@media only screen and (max-width: 736px) {
  .woocommerce ul.products li.product {
    width: 49.0% !important;
    margin: 0.5% 4% 0.5% 0;
    padding: 0 4px !important; 
  }
  body.woocommerce ul.products.columns-3 li.product:nth-of-type(3n+1) {
    clear: none !important;
  }
  body.woocommerce ul.products.columns-3 li.product:nth-of_type(2n+1) {
    clear: both !important;
  }
}

Sorry that’s against forum guidelines. You’ll need to start a new thread.