WooCommerce on iPhone

It is the theme that should be responsive. And if the theme is responsive and it supports WooCommerce, then the theme is responsible to make WooCommerce responsive as well…

Thanks for commenting. As I understand this then the menues of the plugin should be edited in the stylesheet for the theme.

Well, now I understand why the menues fail because they try to combine two different types of thing that not are naturally combined. It might be hard to find out which CSS properties should be used to change a plugin.

Well in order to make something responsive, you have to have pretty good knowledge on how CSS works and more specifically how media queries work. Finding the CSS for an element is the easy part as you can use any of the dev tools out there like firebug or chrome tools.

Yes, and it is even harder to change in menues that someone else has created. If I had set the CSS-styles myself I would have tried, but only for the smallest screensize. Then I guess, I would have deleted the background on the buttons and adjusted the different paddings to the smaller screen as well as decreased the font-size. But that has to be done for every state of the buttons,so I refrain from mixing in.

There might be other plugins or solutions out there.

Hi, I’m having a similar issue using WooCommerce with a theme that supports it – ‘Responsive Theme’ by Cyberchimps.
The products page displays all products in 4 columns rather than one as it should do for mobiles.
I understand CSS very well, including responsive media queries as I have hand built responsive sites myself.
However, playing detective, trying to find out where other people have coded the CSS and what they called it is somewhat nightmarish. But I suppose this is a feature of WordPress and plug ins that we have to live with.
My problem is that the CSS for WooCommerce displays in my editor as one paragraph of code – no separations of CSS content making it almost impossible to see where one CSS instruction ends and another starts.
If I find the solution, I’ll let you know.

@bloohair – what you’re seeing is a compressed version of the CSS. Nothing wrong with that. If you want to see the “human readable” version, look for the LESS files. Those files contain the uncompressed CSS code.

Smashing Pixels – thanks. I’ll look at the LESS files. Not had anything to do with those so far, so a new thing for me.
I’ve also had a response from Cyberchimps who see the site fine on mobile – so it could just be my iphone. there’s a new update out now, so I will install that first and then see.

Quote Roy:

It is the theme that should be responsive. And if the theme is responsive and it supports WooCommerce, then the theme is responsible to make WooCommerce responsive as well…

This sounds good but WooCommerce is still not working very well with a stock theme (TwentyThirteen).

Just pull up the Cart page on an iPhone 5/5s using the TwentyThirteen theme and you can see the layout is somewhat broken. When TwentyThirteen works as designed, you should not see everything pushed the left with white space running from top to bottom on the right. Yet, that’s exactly what the Cart page is doing.

This is exactly what happens to TwentyThirteen when any posted content is wider than it should be. The Cart page itself is just too wide for this theme on iPhone.

Again, this example only uses default installations of TwentyThirteen and WooCommerce… nothing modified.