Hero image not re-sizing properly on mobile?

Site URL: http://nikolsons.com.au/

Hi everyone. The hero image on my site isn't resizing properly when viewing on mobile. It gets cut off as you can see.

I have coded:

@media screen and (max-width:640px) {
.homepage .section-background img {
    width: 100% !important;
    height: auto !important;
}
}

into the custom CSS. It works great to change the scale of the hero image but then leaves a huge blank area until the next section on the page.

How do I go about correcting this? Thanks in advance! 🙂

Remove your code & add new code

@media screen and (max-width:767px) {
.homepage #page section:nth-child(2) {
    min-height: unset !important;
    height: 25vh;
}
}

1 hour ago, tuanphan said:

Remove your code & add new code

@media screen and (max-width:767px) {
.homepage #page section:nth-child(2) {
    min-height: unset !important;
    height: 25vh;
}
}

 

Awesome, worked perfectly! Thanks tuanphan!