Jetpack Woocommerce mobile view

Could you post links to some the pages that do not look good on mobile, so I can investigate further?
Could you also let me know these pages are product views, or other specific Woocommerce pages?

If you want your site URL to remain private, you can also contact us via this contact form:
https://jetpack.me/contact-support/

Thanks!

It happens on the website all around, it might have to do with my theme but not sure how to go about it.

I disable this but will enable it for a bit so that you can see how it looks on mobile (I have been using Iphone to take a look at it).

The website is https://www.AmazingRCstore-shop.com, let me know and thanks for your help.

You will need to add some extra custom CSS rules to customize the woocommerce elements on mobile.

To get started, please go to Appearance > Edit CSS in your dashboard, and check the “Mobile Compatible” option on the right side.

Then, you can add CSS rules that will only be applied to Jetpack’s Mobile Theme, like so:

.mobile-theme .woocommerce ul.products li.product, .mobile-theme .woocommerce-page ul.products li.product {
width:100%;
}

As long as you use the .mobile-theme class before all your CSS changes, it will only be applied to the Mobile Theme.

That should allow you to customize Woocommerce as much as you want, without affecting your main site.

I hope this helps.

Hi Jeremy,

Thank you so much for taking a look at this. That sounds great, so I can just ad that code to the CSS Stylesheet Editor?

Sorry Jeremy, I have no experience with writing CSS so I copied the code above on my CSS Stylesheet and the result is still the same, im guessing i have to specify the style… do you know where can i learn more about this? Im just looking for the store to look more organized and not as long when looking at the mobile version.

I checked your site, and the Mobile Theme doesn’t seem to be activated anymore. The code I mentioned earlier will only work when jetpack’s Mobile Theme module is activated, I’m afraid.

Hi Jeremy,

Sorry, I de-activated it but I tried it with the code you gave me and it made no difference…. I can activate it again so that you can see it. Basically my css edit is empty except for the code you provided.
I will activate it for a few hours so that you can see it.

*/
.mobile-theme .woocommerce ul.products li.product, .mobile-theme .woocommerce-page ul.products li.product {
width: 50%;

this is all my css sheet has right now, am i missing anything?

first and last line have a red X on the side… im pretty sure im doing something wrong

The code you pasted above is missing a closing }.

You’ll also want to set the width to 100%, as I did above, to get better results.

Thanks Jeremy, I have changed it, but still no difference.

I will keep it activated so that you can see it and maybe tell me what am i missing.

Hm, I made a mistake in the code I gave you earlier. Try the following:

.mobile-theme #content ul.products li.product {
width:100%;
}