How to increase “single image container” size in product page?

Hi Forum:

I can’t work out how to make the featured product image and gallery (single image container) in my products’ pages larger than the default size given by storefront. The featured image size is currently too small. I tried the following

.single-product div.product .images {
width: 45.1764705882%;
float: left;
margin-right: 5.8823529412%;
margin-bottom: 3.706325903em;
}

But this messes up the display of the wooswipe gallery plugin I am using, and also the mobile display of wooswipe.

I then tried the following

.single-product-main-image {
width: 118%;
}

.thumbnails {
margin-top: 0px;
margin-right: -40px
}

This works fine in the desktop version, but totally messes up the wooswipe gallery plugin in mobile devices.

Can anyone help me, please? I’d like to increase the size of the single image container by 10-15% (from the default woocommerce storefront size) without affecting the responsive mobile version.

Lastly, is there any way, when in mobile devices horizontal, to make the single image container to expand to fill the width of the screen? At the moment it does not and I am at a loss as to how to get it done…

Your help would be immensely appreciated.

The page I need help with: [log in to see the link]