[Resolved] WooCommerce mobile view

[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/

[Tom]

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?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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.

[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.

[Mikko]

Oh yeah: and both glitches only happen on mobile.

[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?

[Tom]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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. 🙂

[Tom]

Should be fixed in the next version.

Thanks! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts