Digital Pro Mobile Responsive Photo issues since upgrade to Woo 3.0

[kaelin]

I have 2 similar sites - one using enterprise pro (no problem) & one using Digital Pro (problem)

(Digital Pro - Mobile View) - incorrect

TWSaddlery.com Mobile View Enterprise Pro - correct

Both of these were upgraded to Woo 3.0 with same coding added to functions.php and style.css - I've gone through the coding on both to see what might be missing - changed @media sizing to be the same - no luck. Any advice? guidance? TIA!

http://specializedsaddles.com/store/product/eurolight-saddle/

[Victor Font]

Don't know exactly what the issue is, but it has something to do with the gallery tool you are using to display the images. (Zoom) It is adjusting the image dimensions to width: 800px; and height: 1002px;. The image is on the iPhone, put it is so big and so far to the right of the screen that you can't see it.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[kaelin]

Right - I added the Woocommerce 3.0 info to functions

add_action( 'after_setup_theme', 'digital_theme_setup' );
function digital_theme_setup() {
  add_theme_support( 'wc-product-gallery-zoom' );
  add_theme_support( 'wc-product-gallery-lightbox' );
  add_theme_support( 'wc-product-gallery-slider' );
}

I compared the difference in twsaddlery.com where it is displaying correctly and modified css

/* Media Queries
---------------------------------------------------------------------------------------------------- */

@media only screen and (min-width: 300px) {

	.footer-widgets .wrap {
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		 
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}

}

@media only screen and (max-width: 400px) {

	.site-inner {
		margin-top: 0;

I found that Enterprise had this and added it to the style.css - but it didn't change anything

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (-moz-min-device-pixel-ratio: 1.5),
	only screen and (-o-min-device-pixel-ratio: 3/2),
	only screen and (min-device-pixel-ratio: 1.5) {

}

thank you for your response by the way...appreciated!

[kaelin]

I had to set the .css back - it destroyed the settings for desktop/laptop display 🙁

[egleason]

I don't know if you solved this but digital_theme shouldn't be in there. I was searching for the code to fix this and noticed your coding was wrong. At least it worked for me?

the code should be

add_action( 'after_setup_theme', 'yourtheme_setup' );

function yourtheme_setup() {
add_theme_support( 'wc-product-gallery-zoom' );
add_theme_support( 'wc-product-gallery-lightbox' );
add_theme_support( 'wc-product-gallery-slider' );
}

[Author]

Posts