Woocommerce gallery ugly

[kdimedia]

I followed this guide Woocommerce Product Page Gallery Image Size Issue and as far as the display goes, it is what I wanted. It seems that doing this disables changing the image though.
You know, how when you click on a gallery image it changes the featured image to the one you select? That is gone.
I also tried, instead of deactivating the gallery slider, to move the gallery images under the featured but this turns out terribly when testing on tablet or phone. I just need the images to first of all not be tiny, and second of all not be on top of the featured image.

[kdimedia]

I also tried this, and it’s even worse WooCommerce gallery images below featured image

[kdimedia]

This css helps, but there has to be a better way to fix this issue! I’m still working on fixing for mobile and tablet.

    .flex-control-nav.flex-control-thumbs {
    position: relative;
    text-align: left;
    width: 100%;
    height: auto;
}

.flex-control-nav.flex-control-thumbs img {
    width: auto;
    height: auto;
}
.flex-control-nav.flex-control-thumbs li:not(:first-child) {
	margin-left: 0;
}
.flex-control-nav li {
	margin-right: 5px;
	margin-bottom: 5px;
}

[ruenel]

Hello @kdimedia,

Thanks for writing in! I have checked your site and I am seeing this:

I also noticed that you are using jetpack and that Site Accelerator is enabled. Please be advised that 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.

Best Regards.