[Resolved] WooCommerce mobile view

Home Forums Support WooCommerce mobile view

Viewing 15 posts - 1 through 15 (of 24 total)
  • Author
    Posts
  • #320698
    Mikko

    Hi,

    Oh yeah! Today I noticed the new WooCommerce-addon. I was just fiddling with my shop and getting it ready for action. This saved a ton of work, and it looks good.

    My site is here:
    https://mihku.fi/

    Two questions:

    1) I think I might want to have my shopping cart fixed to the bottom right corner of the screen, since my mobile menu is already crowded. I’ve already implemented this with WP Menu Cart Pro, which includes a short code for the shopping cart. Does GeneratePress include a short code or perhaps some other way to do this without a plugin?

    2) On mobile, there’s no space between items (two columns). The images especially have zero padding. This might be because I’ve changed the WooCommerce image sizes from the defaults to 360×360, 720×720, 180×180. But I think these shouldn’t affect the visible size?

    GeneratePress 1.3.46
    #320796
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    1. Probably easier to just use the plugin as you already have it configured.

    2. Can you try clearing your Autoptimize cache?

    #320807
    Mikko

    Thanks!

    2. I just did, and unfortunately it didn’t help.

    #320820
    Mikko

    Hmm, weird. It now looks okay in the WordPress edit preview (set to show mobile; the changes are saved), but not when I’m loading the site on my phone or iPad…

    #320823
    Tom
    Lead Developer
    Lead Developer
    #320830
    Mikko

    I just tried a browser that I never use, the problem persists.

    But hey! Uninstalling Autoptimize solves the problem, and installing it again makes the problem reappear.

    #320840
    Mikko

    Starting anew with Autoptimize, the basic setting that causes the problem is “Optimize CSS code”.

    #321049
    Tom
    Lead Developer
    Lead Developer

    Interesting. In the excluded CSS file, try adding: woocommerce-mobile.css

    #321053
    Mikko

    Tom, I tried, it didn’t help.

    Actually yesterday I tried to exclude all of the CSS-files in GP’s WooCommerce-addon’s folder: nothing helped, but there were sometimes weird changes in the layout. I’d imagine excluding css files from optimization shouldn’t affect layout?

    #321258
    Tom
    Lead Developer
    Lead Developer

    Hmm, weird.

    For now, you can do this:

    @media (max-width: 768px) {
        .woocommerce ul.products li.product, 
        .woocommerce-page ul.products li.product {
            margin-left: 3.8%;
        }
    }
    #321321
    Mikko

    Thanks! You know what? More weirdness!

    Your CSS fixes the problem — unless the option “Also aggregate inline CSS?” is on!

    I used WP’s Custom CSS to add that fix. I guess that’s inline CSS then?

    I promised more weirdness: If the option “Also aggregate inline CSS” is OFF, another small display glitch appears elsewhere, again on mobile only. On my blog home pages (really the category pages), there’s some extra margin on the left side of all posts. There’s some gray background showing where there shouldn’t be any. I remember seeing this glitch a month or so ago, I guess I fixed it by switching on “Also aggregate inline CSS”.

    These glitches never appear on preview window, only after Autoptimize has done it’s thing.

    My own little fix to your fix: padding instead of margin seems to work even with “Also aggregate inline CSS” on. No idea why!

    #321966
    Mikko

    Hello!

    I just tested with another site with only a few of my own customizations.

    This combination produces a display glitch:
    – Autoptimize with “Also aggregate inline CSS” turned OFF
    – GP’s simple columns
    – Viewing the blog home page on mobile

    Here’s an image of the display glitch:

    display glitch

    #321968
    Mikko

    Just for your information — no hurry — at the moment I have no live sites with problems. BTW, Masonry worked without glitches.

    #321973
    Mikko

    Let me know if and when you want me to bring this issue up on Autoptimize’s support forums!

    #322015
    Tom
    Lead Developer
    Lead Developer

    Hmm, can’t reproduce that.

    Here’s my settings: https://www.screencast.com/t/iOVF5Vgp

    Here’s the site: https://www.screencast.com/t/ifTsrOmL

    Any chance you can link me to a site with this issue?

Viewing 15 posts - 1 through 15 (of 24 total)
  • You must be logged in to reply to this topic.