[Resolved] Feature image shows only 50% on mobile view

[Mark]

Hi,
The Product image now show as 50% on mobile view. It was showing 100% before.
Please help

[Elvin]

Hi,

Can you try disabling all caching plugins and check if it still occurs? Let us know.

[Mark]

Thanks.
It seems that it is working OK when I disable my caching. I setup a test environment. See link.
But, I need to use Cache.
How can I get around it? Or, Will you able to advise which CSS file that cause the issue ?
Thanks

[Elvin]

How can I get around it? Or, Will you able to advise which CSS file that cause the issue ?

It’s hard to tell from looking at your site’s page source because all the CSS served are from the cached version rather than the original source.

Try this:

You can try clearing/purging your cache so the caching plugin would make a new one based from your latest setting.

[Mark]

Ok. I had purged all cache. Please check

[Elvin]

Here’s what I see on my end now:
https://share.getcloudapp.com/Wnul76Xl

When the site had the 50% on mobile issue, it was using this:

.woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images {
                width: 50%;
            }

Which was saved within the cache.

Now it’s using this:

media="(max-width: 768px)"
.woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images {
    width: 100%;
}

From generate-woocommerce-mobile-css from the plugin’s .../wp-content/plugins/gp-premium/woocommerce/functions/css/woocommerce-mobile.min.css.

This means the caching plugin is messing up how WooCommerce’s CSS works.

[Mark]

Hi,
I had excluded it from caching & it’s working fine now.
Many thanks for your help.
Have a great day!

[Mark]

Thank you

[Elvin]

Nice one! Glad you got it sorted. No problem. 🙂

[Author]

Posts