mobile shop shows products incorrectly

[jefflogo]

When shop page is resized, between about 420px – 495px, the shop products appear weirdly. 1 per line, 1st line shows product on left, 2nd line shows a product on the right. Seen screenshot. Just happens that my mobile phone must be about 450px wide so it has this problem. This issue also appears on pages that are created using the Swift Page Builder – “Products” element.
here’s a screenshot: http://artofaction.com/wp-content/uploads/2016/12/shoppage.jpg

I tested this with and without my child theme and also tested with parent theme. it happens with parent theme. How do I fix this?

[David Martin – Support]

Try using this:

@media only screen and (max-width: 479px) {
body .woocommerce-shop-page ul.products li.product, 
body .product_list_widget > div > ul.products li.product {
    width: 45%!important;
}
}