Woocommerce Product Gallery images not displaying correctly when selected

[chill986]

I noticed that there were some issues with the way the Product thumbnails were being displayed so I did a search, and found a couple of threads that provided apparent solutions. I added the following in my Custom CSS in the customizer:

.single-product .flex-control-nav {
position: static;
}

.single-product .flex-control-nav li {
float: left;
}
.single-product .flex-control-nav.flex-control-thumbs img {
width: 100%;
height: auto;
}
.single-product .flex-control-nav.flex-control-thumbs li {
float: left;
width: 18.6%;
margin-bottom: 8px;
padding: 3px;
background: transparent;
border: 1px solid #eee;
margin-left: 0;
margin-right: 0.5em;
}

.single-product .flex-control-nav.flex-control-thumbs li:nth-child(5n+5) {
margin-right: 0 !important;
}

Which worked pretty well, but when I click on the thumbnails in the product gallery, the image appears the same size as the thumbnail. It should be 400x400 since that’s what was added. What CSS am I missing or did I incorrectly add that causes this? I have several other X installations with a similar problem.

Sample link:

ProPac Preparedness Backpack Kit | Propac USA

But this is happening on every product that has a product gallery. The primary image, used when the product is first loaded, always comes up the proper size.

Thanks in advance.

[basanta]

Hi There,

Thanks for writing in!
Can you please try adding this css to your global css.

.attachment-shop_single {
  width: 100%;
}

If that doesn’t help please send us your login details to help you on this.
Please send the details in a secure note.

Thanks

[chill986]

That worked! Thank you!!!

[christian]

You’re welcome.