Mobile parallax banner cropping 7.0

Site URL: https://www.joannapaolaart.com

I have two banners set up for parallax on they're working great on desktop. On mobile, they are both cropped so only the middle part shows (see screenshots). I would like it to show the full width of the banner on mobile as well as desktop.

I have looked around and tried custom CSS but can't get any to work at all. I'm trying to use the mobile breakpoint to show the full width, but have not been able to get any change. 

This is with squarespace 7.0. I'm trying code like is suggested here, editing pageid etc, or trying to specify 100% width, but it makes no difference: https://www.rebeccagracedesigns.com/blog/change-banner-image-mobile

Add to Home > Design > Custom CSS

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

Thanks!

On 5/20/2020 at 2:34 PM, tuanphan said:

Add to Home > Design > Custom CSS

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

 

Hi @tuanphan,

. I need help with my squarespace 7.0 mobile banner. Its getting cropped in mobile. here's the url:

https://www.alongsiders.org/trainingfortrainers

I will be very thankful if you reply to this.

6 hours ago, Asiya said:

Hi @tuanphan,

. I need help with my squarespace 7.0 mobile banner. Its getting cropped in mobile. here's the url:

https://www.alongsiders.org/trainingfortrainers

I will be very thankful if you reply to this.

@media screen and (max-width:640px) {
body#collection-5f18f20d750c1632b670ab43 {
div#banner-wrapper img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
div#banner-wrapper {
    height: 200px;
}
}
}