Index banner images displaying smaller on mobile + disabling parallax on mobile/ipad

Site URL: http://teamcjwip.squarespace.com

Hello, 

I'm trying to finish up the homepage design for my site but there's a couple custom css problems I'm running into. I currently have an index page displaying 2 banner images that parallax as you scroll. I would like to use custom css to make the banners show fully on mobile because they are currently being stretched as if there is a minimum height.. i would also like them to not use parallax on mobile.

I've tried the following code, which has stopped the images from parallaxing on mobile but the images are still stretched.

site - http://teamcjwip.squarespace.com

pass - jaglovers

/* show home page block dependent on screen size */ 
@media only screen and (max-width: 780px) { #mission-banner { display: none; } } 
@media only screen and (min-width: 781px) { #mission-banner-mobile { display: none; } }
@media only screen and (max-width: 780px) { 
  figure[style] { 
    transform: initial !important; 
  } 
}

You can try display none .Parallax-item, then use CSS to set background image for banner section

I did for some clients with this way 😂