WordPress.org

Ready to get started?Download WordPress

Forums

Jetpack by WordPress.com
[resolved] Jetpack + Woocommerce mobile view (14 posts)

  1. Palexandra
    Member
    Posted 8 months ago #

    Hi,

    So I installed Jetpack looking forward to have a better mobile version of my website but it just simply does not work.... the result is not steticaly pleasant and still messy.... any idea on how to fix this or why is this happen?

    http://wordpress.org/plugins/jetpack/

  2. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 8 months ago #

    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:
    http://jetpack.me/contact-support/

    Thanks!

  3. Palexandra
    Member
    Posted 8 months ago #

    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 http://www.AmazingRCstore-shop.com, let me know and thanks for your help.

  4. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 8 months ago #

    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.

  5. Palexandra
    Member
    Posted 8 months ago #

    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?

  6. Palexandra
    Member
    Posted 8 months ago #

    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.

  7. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 7 months ago #

    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.

  8. Palexandra
    Member
    Posted 7 months ago #

    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.

  9. Palexandra
    Member
    Posted 7 months ago #

    */
    .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?

  10. Palexandra
    Member
    Posted 7 months ago #

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

  11. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 7 months ago #

    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.

  12. Palexandra
    Member
    Posted 7 months ago #

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

  13. Palexandra
    Member
    Posted 7 months ago #

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

  14. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 7 months ago #

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

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

Reply

You must log in to post.

About this Plugin

About this Topic