I am using GP premium.
In the customizer: layout>woocommerce>shop I have selected the following radio buttons:
Image Alignment: left
text Alignment: left
I am using 400 x 200 images for woo.
In the customizer I have set
Main image width: 400px
Thumbnail width: 400px
I have regenerated all thumbnails.
Images are fine on phone and full screen view on both shop (gallery) and single product pages.
If I view a single product page in tablet view the image scales to 100% width of the screen (620px) which is the desired effect. When I inspect the css for that image in chrome I can see:
.woocommerce div.product div.images img {
display: block;
width: 100%;
height: auto;
}
However, if I view the shop page in tablet view the image is not full width (it is 400px).
When I inspect the css for one of these images in chrome I can see:
.woocommerce ul.products li.product.woocommerce-image-align-left a .wc-product-image img, .woocommerce ul.products li.product.woocommerce-image-align-right a .wc-product-image img, .woocommerce-account .woocommerce-MyAccount-navigation {
width: 100%;
}
Why does this image NOT expand to fill full screen (like occurs when I view a single product page image in tablet)?
And what do I need to add to my CSS to make sure that is occurs?
Thanks