Archived topic

Autoptimize Inline Defer breaks mobile woo product archive grid

5 replies · Started by Douglas on June 9, 2019

Viewing posts 1–6 of 6

June 9, 2019 at 2:11 pm #924299

Hi team,

I have an issue with the woocommerce product archive grid when using autoptimizer to inline and defer above the fold css. I'm using GP Premium 1.8.2 with woocommerce module enabled.

As soon as you enable the Autoptimize option "Inline and Defer CSS" (regardless if you enter any actual CSS to defer or not), the product archive grid is no longer responsive in mobile view. Instead of showing 1 column - my current setting - it shows 4 columns. And this CSS is generated on the page:

.woocommerce .wc-columns-container.wc-columns-4 .products {
grid-template-columns: repeat(4,1fr);
}

When you disable the Autoptimize "Inline and Defer CSS", the grid is responsive again and you have this CSS:

.woocommerce #wc-column-container.wc-mobile-columns-1 .products {
grid-template-columns: 1fr;
}

I can't get it to work when inline defer is turned on, even trying to override it using custom CSS. Would be very grateful for any advice, even just to know if it is a GP issue or not would be helpful.

Link to my site is provided, right now the inline defer option is turned ON.

TIA,

Douglas

June 9, 2019 at 3:07 pm #924324

Strange, it seems to be missing that mobile WooCommerce file completely. I wonder if it's because that file has a media query built into the resource call itself as opposed to in the file.

It might be worth asking Frank (the dev behind AO) if that would cause an issue.

For example, this is the call to the missing file:

<link rel='stylesheet' id='generate-woocommerce-mobile-css' href='https://gpsites.co/seller/wp-content/plugins/gp-premium/woocommerce/functions/css/woocommerce-mobile.min.css?ver=1.8.2' type='text/css' media='(max-width:768px)' />

The only difference between this file and others is the media attribute.

June 9, 2019 at 4:14 pm #924340

Hi Tom,

OK sounds like it's an autoptimize issue, I'll check with him.

thanks!

June 9, 2019 at 4:55 pm #924347

I just now changed some AO settings and back again, cleared the cache, now it seems to have picked up that woocommerce-mobile.min.css as well. But the issue still persists.

I don't notice any other CSS issues in mobile viewport. It only seems to affect the grids including related & upsell.

Just to make sure, did you confirm this issue on one of your sites or is it unique to mine?

June 10, 2019 at 12:54 am #924523

Hi Tom, I finally got my custom CSS to work. Still not sure about the root cause but trying to open my shop so gotta move on!

In case anyone needs it here is the CSS. I use GP for product archive and elementor for product single:

/* Product grid columns for mobile */
    .woocommerce .wc-columns-container.wc-columns-4 .products,
    .woocommerce .elementor-products-columns-4 .products {
        grid-template-columns: 100% !important;
    }

/* Product grid columns for Tablet */
@media (max-width: 768px) and (min-width: 420px) {
    .woocommerce .wc-columns-container.wc-columns-4 .products, 
    .woocommerce .elementor-products-columns-4 .products {
        grid-template-columns: repeat(2, 48.5%) !important;
    }
}

/* Product grid columns for Desktop */
@media (min-width: 769px) {
    .woocommerce .wc-columns-container.wc-columns-4 .products, 
    .woocommerce .elementor-products-columns-4 .products {
        grid-template-columns: repeat(4, 25%) !important;
    }
}

June 10, 2019 at 8:39 am #925002

Thanks for sharing your code! We'll look into this to see if it's something we can fix on our end.

This archived topic is closed to new replies.

Start building better websites today.