Resizing Banner Image on Mobile?

Site URL: http://www.vidadoulas.ca

Hey There, 

Website images look great on desktop, but when viewed on mobile, they are cropped in so you can't see the whole image when looking at the banners. I had a look at the forum and tried some custom code, but doesn't seem to work on our site. 

I would love any help to get it so the whole image can be viewed on the home page, but also our services pages as well. 

Thanks so much! 

Shea 

Add to Home > Design > Custom CSS

/* resize mobile image */
@media screen and (max-width:640px) {
.homepage #parallax-images>div:first-child img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
.homepage #parallax-images>div:first-child {
    transform: unset !important;
    top: 100px;
}
.homepage #content-wrapper>div:nth-child(3) {
    height: 250px;
}
}