Slideshow:Full on mobile view is cropped. How to fit image on screen?

Hiya!,

I've finished completing my website for the desktop view. I'm happy with how it is. My only issue is the mobile view.

I'm using slideshow:full on my desktop on pages "Professional & University" when viewed on mobile the slideshow is cropped.

I'm also using hover in and out effects in the Design>Custom CSS using the code below. 

//Zoom In Smooth//
.gallery-fullscreen-slideshow-item img:hover{height:100%!important; width:100%!important; transform:Scale(1.15);
overflow:hidden!important; transition-duration:3s}
.gallery-fullscreen-slideshow-item{overflow:hidden!important}

//Zoom Out Smooth//
.gallery-fullscreen-slideshow-item img {
transition: .8s ease;}

Can someone please advise how I can fix this issue on the mobile view?. How do I fit the slideshow to the extent of the screen?. Or if possible disable mobile view altogether.

Site:https://osman-b-zaman.squarespace.com

Pass: Aries

Kind Regards

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.gallery-fullscreen-slideshow {
    height: 30vh !important;
}
}

Thx tuanphan,

I can confirm this works. I tweaked the height value from 30vh to 23vh to see more of the image.

The only problem I can see is when you rotate the phone to landscape view it crops from both sides vertically.

Like the image below. How would I proceed to have it show uncropped in the landscape view as well?.

Kind Regards

Thx works wonders. Slightly tweaked the values in green.

//Fit on Mobile Portrait//
@media screen and (max-width:767px) {
.gallery-fullscreen-slideshow {
    height: 23vh !important;
}
}

//Fit on Mobile Landscape//
@media screen and (max-width:767px) and (orientation:landscape) {
.gallery-fullscreen-slideshow {
    height: 90vh !important;
}
}