how do i change the hero width on my mobile site? i tried this code but it isn't working

Site URL: http://http/sydneyreneephotography.com

@media screen and (max-width:767px) {
.collection-5e77e8500ff82c23205f2869.view-item #page section:nth-child(1) {
    min-height: 50vh !important;
}
}

Add this to Design > Custom CSS

@media screen and (max-width:640px) {
body.homepage .Parallax-item:first-child img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
section#hero-image-foster {
    height: 200px;
}
}