Posts Tagged ‘media queries’

More responsiveness for WooCommerce 2.1 default stylesheet

Written by Alexis Nominé on . Posted in WordPress

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:

Continue Reading

A responsive experiment with CSS3 and jQuery: switching between accordion and tabs display

Written by Alexis Nominé on . Posted in Experiments

I've been playing lately with responsive design, trying to present data the best way depending on the screen size available. Most of the time, CSS3 media queries will be enough. However, some designs will also require a bit of jQuery. Is it possible to make it responsive as well? That's what I intented in this experiment.

For the purpose of this example, I have a list of 10 well known stars with a small bio. I want to display it as an accordion on smaller screens, and as vertical tabs on the bigger ones.

If you're too impatient to reed the whole article, have a look at the Demo

Continue Reading