How to remove unwanted grey section space after I resize an image for mobile view?

Hi, 

im hoping someone can help?

I can’t get rid of the grey space after resizing my main background image for mobile view. My site isn’t live yet and still trying to understand how this works.

I found a feed on here and have been trying this code but it doesn’t appear to work for me?

/* Mobile-Homepage-topbanner */
@media screen and (max-width:767px) {
section[data-section-id="5edddb08ea5e395a85788610"] {
    min-height: unset !important;
    height: 35vh !important;
    margin-top: 15vh;
}
}

attached image of my site in mobile view is the best I can do currently atm. 
this uses the resize code, also found on this forum, below.

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

so I think it must be a combination of both somehow?

Any help would be greatly appreciated!!

Can you share link to page where you have problem? We can check easier

Sure! And thanks for your reply. It’s www.eaglesaviationart.co.uk when viewed on a mobile device?

many thanks!

The image also doesn’t resize correctly in I pad view (when the iPad is vertical).  Is there some code that will automatically resize the image and section for device used? 
many thanks!

Hi. Don't remove any code in your current code.

Add this to Design > Custom CSS

/* remove grey space on mobile */
@media screen and (max-width:767px) {
[data-section-id="6182a66412336b4fc5cf549e"] {
    min-height: unset !important;
}
}

This works brilliantly - thank you 👍