WooCommerce Mobile Image Not Adjusting Correctly

[VitalityCBD]

OK, so i disabled image zoom functionality because it thought it might be the problem (and I don’t want it anyway).
But that didn’t resolve the weird sizing glitch reported by Google Search Console on Mobile Responsive issues.

This product https://vitalitycbd.com/buy/usda-organic-cbd-oil/ and a few others, have no issues. They seem to have a flicker, like they want to do the same error as I’m seeing on the three pages, but ultimately hold themselves together.

All three products in this category glitch out, and half the image goes off screen. Is there any reason for this I’m not seeing? Is there any code to prevent it from happening?

CBD Salves - Organic CBD Ingredients | Vitality CBD

Please help! Thank you.

Jesse @ Vitality

[jade]

Hello Jesse,

There seems to be a third party plugin or script that is adding a fixed with to the product image.

Try adding this code in X > Theme Options > CSS:

.woocommerce-product-gallery__wrapper, 
.woocommerce-product-gallery__image {
    width: 100% !important;
    height: auto !important;
}

Hope this helps.

[VitalityCBD]

I think that worked.
Can you check on your end to see if it’s working for you too?
I never know with cookies and caches and what not.

[ruenel]

Hey Jesse,

Yes, it is already working from our end. Here’s what we are seeing:

Cheers.

[VitalityCBD]

No, that didn’t work, at least not entirely. It makes it so none of the other images outside of the main image display. We have no third-party plugin outside of WooCommerce Additional Variation Images, and that plugin hasn’t had any conflicts in the past as it was made by WooCommerce for WooCommerce.

[jade]

Hi @VitalityCBD,

Would you mind posting links of those products that you’re referring to?

I check some products pages on your site and I am not able to see any with issues as what you’re describing.

[VitalityCBD]

Water Soluble CBD Oil | Full-Spectrum | Vitality CBD of Buffalo

WooCommerce says its a conflict with X Theme and it’s not them, i opened support tickets on this everywhere i could.

[jade]

Hi Jesse,

I checked the console for errors and found this:

It looks like the issue is neither with the theme nor Woocommerce but with the caching on your site.

This usually happens when you minify the scripts on your site. Kindly check your WPRocket plugin as we cannot provide support for this since this is not directly related to the theme.

Hope this helps.

[VitalityCBD]

It is not a problem with WP Rocket. I removed the Minification of CSS and JS, and removed the code snippet ya’ll gave me, and the mobility issues still persist. Can everyone stop passing the buck and please help me. Without the minify scripts the site is not only broken, but it’s slower then molasses.

EDIT: I had to put all the minify stuff back on because the site was too slow, but i cleared all caches, loaded incognito mode, and nothing was resolved. I put your script back on, because it’s better than being unresponsive on mobile for the time being. And i tested turning on and off lazy load for images, and that didn’t change anything either. abd please remember, the mobile issue was not global, it was isolated to three out of six product pages. If it had to do with minifying scripts, it would have broken everywhere, not in isolated areas.

[ruenel]

Hello Jesse,

I have investigated your issue. You are having this issue because of the Site Accelerator feature that were enabled in Jetpack plugin. The Site Accelerator will cached all your images and sometimes it has some problems loading the images. One of the limitations of photons:

No cache invalidations – currently the images are cached “forever”.
If you want to “refresh” an image you will need to change the name of the image.
Adding random query arguments, commonly known as cachebusters, will not work.

You can check it here: https://jetpack.com/support/site-accelerator/ for further information.

For the time being, please disable Site Accelerator module and test your site again. You will find that the full images will be displayed without a hitch.

We would love to know if this has worked for you. Thank you.

[VitalityCBD]

Unfortunately, that did not work either. The main image still expands to a wildly larger size on mobile and obstructs all other content. When i add the script I was given back in…

.woocommerce-product-gallery__wrapper, 
.woocommerce-product-gallery__image {
    width: 100% !important;
    height: auto !important;
}

it once again breaks the ability to view the rest of the images. but does fix the main image scaling problem. It’s not Jetpack, it’s not WProcket. I’ve left Jetpack accelerator off for now, but I left in that script again, because I can’t have the website not work on mobile devices.

[ruenel]

Hello Jesse,

Kindly provide us access to your site so that we can check your settings and the rest of the active plugins. Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
To know how to create a secure note, please check this out: https://theme.co/docs/getting-support

Regards.

[christopher]

Hi Jesse,

I checked your website and could not find the problem cause without touching the plugins. I checked the front end and it is indeed an additional width attribute added to the images via Javascript which is not part of our theme at all.

We can not help you without being able to test for plugin conflict and maybe changing the theme to test the case for the other themes and see if it persists.

Please kindly make sure that you have a staging version of your website using this guide . Then please kindly get back to us with the staging site information so that we can investigate the problem freely and can disable or change the plugins if needed.

Please kindly consider that we do not have such an issue in our theme and there are thousands of people using our theme with Woocommerce plugin with no problem. So this is something related to your website environment that needs to be investigated.

Thank you for your understanding.

[VitalityCBD]

stagevitality.wpengine.com

[christopher]

Hi Jesse,

Thank you for the staging website information. I followed the steps below:

1. Disabled all the plugins except the ones that were Woocommerce related. Tested the CBD Salve and the image was not responsive.
2. Then disabled the Woocommerce Variant Images plugin and it fixed the problem.
3. Then I enabled the p[plugin again and installed the default twenty-twenty WordPress theme.
4. The result was again the image was not responsive.

So even without our theme, the plugin in question (Variant Images) causes the images to have a fixed with and it makes it none-responsive.

This shows that the problem is generated by that plugin and not our theme.

Thank you for your understanding.

[VitalityCBD]

Thank you. WooCommerce finally admitted that there was something wrong with their own plugin and assigned a team to patch it. They were so quick to say it wasn’t them. Your support on this was invaluable.

[ruenel]

You are most welcome!