Code to resize banners for mobile?

Site URL: https://www.gotphotography.net/

Hey guys, I need some help with coding.

I cannot for the life of me get the banner to resize for mobile. I have gone through the forums and tried several different suggestions on previous posts and nothing seems to work. My website looks amazing on desktop, but the banner is horribly cut off on several pages on mobile. I have 7.1

Which banners on which pages? Can you post a screen shot?

The banners on my home page, about, contact and journal. Here is what they look like on mobile.

Here's what it looks like on desktop -

Oh, the background photos.  That's a common complaint I get from my customers.

There's no real way that I have found to fix that, if you have content on top of it.

If its blank, you can shrink the height so you can keep the aspect ratio similar to a desktop.

11 minutes ago, rwp said:

Oh, the background photos.  That's a common complaint I get from my customers.

There's no real way that I have found to fix that, if you have content on top of it.

If its blank, you can shrink the height so you can keep the aspect ratio similar to a desktop.

What about just the home page since there is technically nothing on top of that? Or changing the image completely only for mobile?

@media screen and (max-width: 999px) {
	[data-section-id="5ee4228213797867355e78b9"] {
    	height: 75vh !important;
    	min-height: 10vh !important;
	}
}

@media screen and (max-width: 699px) {
	[data-section-id="5ee4228213797867355e78b9"] {
    	height: 50vh !important;
    	min-height: 10vh !important;
	}
}

@media screen and (max-width: 399px) {
	[data-section-id="5ee4228213797867355e78b9"] {
		height: 40vh !important;
		min-height: 10vh !important;
	}
}

Give that a try for the home page