Image Gallery gets cropped when on mobile view. How to Fix gallery "Height" only on just Mobile

Hello everyone I just finished my company's office website (https://www.zampolin.com/contact) and everything so far has been great but have one last item need major help with. On our Contact page, at the bottom, I added an image gallery "slideshow reel" that has a group photo of our office family. We will add more pictures here as time goes on and it looks great on a computer or larger screen. But when I go to our site on mobile, the group photo gets cropped cutting two people out of the photo. I have the gallery set to "inset" and I played around with the gallery "Height" in the "Edit Section". When I lower the height it does work and the group photo will fit the mobile view but when I return back to the desktop view it shows the gallery "slideshow reel as very tiny. Is there a way to control the height only on mobile? Can someone please help me get this correctly? 

try adding this to Custom CSS:

@media only screen and (max-width:767px) {
  .gallery-slideshow {
      height:80vw !important;
  }
}

You can adjust the value of 80vw (height = 80% of the window width, and 5x4 aspect ratio)

Hi Ziggy thank you for your reply. I just pasted that into the Custom CSS on the "design" tab and then saved and refreshed on my phone. Nothing seemed to change. the image still gets cut off on the sides. I then tried updating the 80vw to be 50vw and still nothing happened. Any other suggestions? really appreciate any help

Hi Ziggy! no need to apologize... It worked perfectly! Thank you very much for your knowledge and help with our website! You made our day just now. Have a fantastic weekend!

9 minutes ago, ZAMPM said:

Hi Ziggy! no need to apologize... It worked perfectly! Thank you very much for your knowledge and help with our website! You made our day just now. Have a fantastic weekend!

Thanks! You too!

If you can mark my post as the solution and give a thumbs up that would be much appreciated!