Gallery Block image crop issue

Site URL: https://www.scenephotography.co.uk/news?offset=1583092260152

Hi, 

I'm having issues with gallery blocks within a blog post. It is built in 7.1.

I upload portrait images into the gallery block and it looks fine in the build site, I have put the focal point in the right areas etc. But when you view the blog post on the live site it has cropped the portrait image into a banner image, which crops off most of the image?

The first image shows it on the live site, second is how I see it on the build page. 

The easy option is to delete the gallery and use separate images, but I'm wanting to make it as easy and efficient as I can. 

I really need your help!

Thanks

Try adding this to Design > Custom CSS

.sqs-gallery-block-stacked .image-wrapper img {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
}
.sqs-gallery-block-stacked .image-wrapper {
    padding-bottom: 100% !important;
}