i have found a bug that i cant seem to resolve. https://staging.spectaculars.us/product/benjamin-black/
The product gallery .flex-active-slide main image does not resize after updating to the most recent wp/woocommerce.
To be more specific the using chrome, when you have a full screen session and make it a windowed session of a smaller size the active image is then clipped. If you do the reverse and increase the window from a smaller sized one the image remains the same and in addition to that it will also show the overflow of the following product image in the gallery.
I am using some custom css as shown below. Please note that removing the css does not resolve the issue.
The custom css that is in use at the moment is as suggest in other places on the forum. I have regenerated thumbnails and tried troubleshooting but have not been able to figure out what is causing the issue.
The .flex-viewport div has the proper dimensions, however the .woocommerce-product-gallery__image does not inherit them after resizing the browser. Any ideas?
/*
Moves the Single Product Thumbnails under the Product Image
*/
.woocommerce-product-gallery__trigger img {
opacity: 0 !important;
}
.single-product .woocommerce-product-gallery__image >a>img{
width:100% !important;
}
.single-product .flex-control-nav.flex-control-thumbs li {
float: left;
width: 18.3%;
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(5) {
margin-left: 0 !important;
}
.single-product .flex-control-nav.flex-control-thumbs img {
width: 100%;
height: auto;
}
.single-product .flex-control-nav.flex-control-thumbs {
position: relative;
padding-left: 0;
padding-right: 0;
padding-top:8px;
}