Mobile customization

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

I am struggling to make my banner image 100% mobile compatible. I was able to change the image width size (as seen in pic 1) but when I did, there's a huge blue block underneath the image. I even changed the theme to be white and it's still there. I do not want to change the color, I want to get rid of this space so that the next section comes underneath the banner image. Without the code, the image is too wide for the screen (as seen in pic 2). I am posting the code I used  beneath .

Can someone please help?

It seems you solved with this code?

@media screen and (max-width:767px) {
.homepage #page section:first-child {
    min-height: 35vh;
}
}