{"id":292,"date":"2014-02-21T00:03:42","date_gmt":"2014-02-20T23:03:42","guid":{"rendered":"http:\/\/alexis.nomine.fr\/en\/?p=292"},"modified":"2014-02-21T00:03:42","modified_gmt":"2014-02-20T23:03:42","slug":"bit-responsiveness-woocommerce-2-1-default-stylesheet","status":"publish","type":"post","link":"https:\/\/alexis.nomine.fr\/en\/blog\/2014\/02\/21\/bit-responsiveness-woocommerce-2-1-default-stylesheet\/","title":{"rendered":"More responsiveness for WooCommerce 2.1 default stylesheet"},"content":{"rendered":"

Following my article on how to add responsiveness to WooCommerce 2.0 default stylesheet<\/a>, here is how to add more<\/b> responsiveness to WooCommerce 2.1<\/a>.<\/p>\n

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 ...).<\/p>\n

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.<\/p>\n

If you want to get straight to the point, you can download the updated stylesheet here<\/a>, upload it in your theme folder, and add this in your functions.php file:<\/p>\n