WooCommerce Product Thumbnails

Hi
I moved from the restricting Storefront theme over to GeneratePress Premium.
On the single product page I want to move the Product thumbnails from under the product image to the left of it.
To do this I need to configure the thumbnails in a single column, move the main image to create space, display the thumbnails in a single column left of image.

I thought I had it fixed using
In functions.php (child theme)

/* Change Product Thumbnails to side columns */
add_filter ( 'woocommerce_product_thumbnails_columns', 'imr_single_gallery_columns' );

function imr_single_gallery_columns() {
return 1;
}

AND

In CSS Child theme

* Single Image Gallery Move Thumbnails */

/* Make image 75% width to make room to its right */

.single-product div.product .woocommerce-product-gallery .flex-viewport {
width: 80%;
float: right;
}

/* Make Gallery 25% width and place it beside the image */

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs {
width: 20%;
float: left;
}

/* Style each Thumbnail with width and margins */

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img {
width: 90%;
float: none;
margin: 0 0 10% 10%;
}

/* Move the zoom tool to the left side to accommodate the gallery thumbs (otherwise it covers the first thumbnail */
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
right: .875em !important;
}

I had this working in Storefront before but I think it maybe something to do with the grid system that is stopping me with Generate Press.

Are you able to shed any light on the issue please.

Thanks
Ian