Banners cutting off on mobile

Site URL: https://yellow-saxophone-b7y7.squarespace.com/home

I'm having the same issue in which the banners cut off on mobile view. I use the code you provided which fixes that issue but then creates an enormous white space below each banner. How can I fix this?

What is your password?

Tallydoon459

Now I've found a code that fixes the spacing and banner being cut off issues for the top banner, but does not fix the banners on the rest of the page being cut off....

10 hours ago, chloezola526 said:

Now I've found a code that fixes the spacing and banner being cut off issues for the top banner, but does not fix the banners on the rest of the page being cut off....

Add to Design > Custom CSS

/* Homepage banner */
@media screen and (max-width:767px) {
[data-section-id="61cf674327ff6407deca6a76"] {
    min-height: unset !important;
    height: 35vh;
}
}

Thanks that seems to fix the header banner, but the banners below are still cut off...is there a code that can fix that?

10 hours ago, chloezola526 said:

Thanks that seems to fix the header banner, but the banners below are still cut off...is there a code that can fix that?

You mean 4 fullbleed images on homepage?

The banners below, I fixed the orange building one, but this one is still cut off on mobile, I've attached a screenshot below to show you:

10 hours ago, chloezola526 said:

The banners below, I fixed the orange building one, but this one is still cut off on mobile, I've attached a screenshot below to show you:

Use this new code

/* Homepage banner */
@media screen and (max-width:767px) {
[data-section-id="61cf674327ff6407deca6a76"] {
    min-height: unset !important;
    height: 35vh;
}
[data-section-id="61d3271dd788ed6ed340bb86"] {
    min-height: unset !important;
    height: 30vh !important;
}
}