Background Image Cropped on Mobile

Hi,

I'm putting together a website: www.maxandal.org

I like the way the background image looks on desktop but on my phone it's zoomed in and cropped. I don't want to have to change the image but I'd like it to be also properly formatted for mobile. 

Any help advised thank you

Add to Home > Design > Custom CSS

/* resize mobile home banner */
@media screen and (max-width:767px) {
.homepage #page section:first-child {
    min-height: 30vh !important;
}
}

Thank you!!!!

I see it also crop on tablet, use this code for tablet

/* resize tablet banner */
@media screen and (max-width:991px) and (min-width:768px) {
.homepage #page section:first-child {
    min-height: 40vh !important;
}
}