woo images size on tablet view not 100%

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