[Resolved] WooCommerce mobile view

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

[Tom]

Hi there,

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

2. Can you try clearing your Autoptimize cache?

[Mikko]

Thanks!

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

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

[Tom]

Browser cache maybe?

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

[Mikko]

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

[Tom]

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

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

[Tom]

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%;
    }
}

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

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

[Mikko]

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

[Mikko]

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

[Tom]

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?

[Author]

Posts