More responsiveness for WooCommerce 2.1 default stylesheet
Following my article on how to add responsiveness to WooCommerce 2.0 default stylesheet, here is how to add more responsiveness to WooCommerce 2.1.
In this great new version, WooThemes developers decided to separate layout from the rest of the style. Which is good news because it's a lot easier to identify where css has to change to be responsive. What I like less is that responsive behavior they added is too limited: only one "breakpoint" around 768px, so it doesn't adapt that well to the available space on screen of the variety of devices (smartphones, phablets, tablets ...).
So let's update it with 4 breakpoints so the product grid grows from 1 to 4 products per line, with a bit of "mobile first" flavour.
If you want to get straight to the point, you can download the updated stylesheet here, upload it in your theme folder, and add this in your functions.php file:
After the break, the updated "woocommerce-layout.less" with some comments: