Black Friday Sale! Get up to $30 off GP Premium! Learn more ➝

[Resolved] WooCommerce mobile view

Home Forums Support [Resolved] WooCommerce mobile view

Home Forums Support WooCommerce mobile view

Viewing 9 posts - 16 through 24 (of 24 total)
  • Author
    Posts
  • #322025
    Mikko

    “Also aggregate inline CSS” should be turned OFF to reproduce the problem! You have it on.

    Okay, I turned that option off for my site which has very low traffic at the moment:
    https://mihku.fi/ihmettele/

    #322026
    Tom
    Lead Developer
    Lead Developer

    Ah yes, that keeps the option generated CSS in the head, but adds the combined CSS above it. This makes it so the CSS in the files is overwritten by the generated CSS.

    Is there a reason you don’t want to aggregate your inline CSS?

    #322032
    Mikko

    No reason! I don’t understand that option, but I get it that ON is generally the best choice.

    Only that with that option ON, i needed to tweak your quick fix:

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

    With the option ON, this CSS didn’t do anything until I replaced margin-left with padding-left.

    #322037
    Mikko

    So I guess that might be a clue for solving the original bug I reported on this thread. Autoptimize doesn’t seem like to that particular piece of CSS for some reason.

    Seems to me that both glitches have something to do with margins, and they both happen when WordPress shows many articles/items.

    #322039
    Mikko

    Oh yeah: and both glitches only happen on mobile.

    #322047
    Mikko

    The two glitches may actually be caused by the same bug.

    The first glitch drops the left margin of a product.

    The second glitch adds extra left margin for an article. Perhaps you have negative margin in the CSS here?

    #322315
    Tom
    Lead Developer
    Lead Developer

    There’s negative margin to the left of the product container. This allows for the edge of the columns to line up with the rest of elements.

    You definitely want to aggregate inline CSS if you’re doing other CSS optimization.

    #322329
    Mikko

    That’s good to know! I’ll stick to aggregate inline.

    Okay, then it seems that Autoptimize breaks left margin in both of those places. Since GP’s layout looks fine without Autoptimize, this is probably their bug, not yours.

    Can you reproduce the two-column mobile WooCommerce layout problem with Autoptimize? I guess that’s the one that might come back to haunt you in the future. I’m happy enough with my quick fix. πŸ™‚

    #322383
    Tom
    Lead Developer
    Lead Developer

    Should be fixed in the next version.

    Thanks! πŸ™‚

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