Banner on Home Page cutting off in Mobile

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

I cannot get my full width banner to resize correctly in Mobile. I tried using focal points but it is not enough. I have very little coding experience and a designer put the home page together. 

Any advice on how to fix this so the home page image isn't cutting off but instead resizing?

https://www.nicoleschuette.com

Thank you!
 

Add to Home >D esign > Custom CSS

@media screen and (max-width:640px) {
.homepage {
.Parallax-item:first-child img {
    width: auto !important;
    height: 100% !important;
    left: 0 !important;
    top: 0 !important;
}
section#bio {
    min-height: unset !important;
    height: 35vh;
}
.Parallax-item:first-child figure, .Parallax-item:first-child {
    height: 35vh !important;
}

}
}

Thank you that worked great. I appreciate it. 

@tuanphan Hello!

I have added the code to my site, however more than half of the screen on mobile is now just an empty space. Any ideas how to fix this? Thank you so much!

eatplantsandtravel.com

On 7/31/2021 at 12:19 AM, heiiidii said:

@tuanphan Hello!

 

I have added the code to my site, however more than half of the screen on mobile is now just an empty space. Any ideas how to fix this? Thank you so much!

 

eatplantsandtravel.com

Try this code

@media screen and (max-width:640px) {
.homepage {
.Parallax-item:first-child img {
    width: auto !important;
    height: 100% !important;
    left: 0 !important;
    top: 0 !important;
}
section#hero-image {
    min-height: unset !important;
    height: 35vh;
}
.Parallax-item:first-child figure, .Parallax-item:first-child {
    height: 35vh !important;
}

}
}

If it still doesn't work, keep new code & let me know. We will check again