Grey deadspace showing up after Using custom CSS

Site URL: https://teal-elephant-p648.squarespace.com/afsana-les-histoires

HI All,

Been going throug the responses here to solve a little issue I'm having with some CSS in 7.1 (making the switch from 7.0 to 7.1).

The problem was that the full bleed image being cropped on mobile. Which I sorted out after finding some custom CSS code, except there is a bunch of grey deadspace showing up underneath the section.

Can anyone help to get rid of this? (the space shows up only on mobile.

Site password 1122

Thank you.

@media screen and (max-width:640px) {
[data-section-id="6024f7cbb24a064cad6e4396"] .section-background img {
    width: 100% !important;
    height: auto !important;
}
}

@media screen and (max-width:767px) {
[data-section-id="6024f7cbb24a064cad6e4396"] {
    min-height: 40vh !important;
}
}

That's the code i'm using.

In your code, remove this code

@media screen and (max-width:640px) {
[data-section-id="6024f7cbb24a064cad6e4396"] .section-background img {
    width: 100% !important;
    height: auto !important;
}
}

next adjust 40vh to another number what you feel okay