Resize banner images on mobile (York 7.0)

Site URL: https://www.themkcreatives.com/about

Hey guys!

I just launched my site and I still have a few things that I can't get done.

I tried several CSS I found on the forums trying to adapt them to my site , but can't get it right!

I'd like my banners to be some sort of 16:9 when on mobile, rather than the whole 4:5 size as it takes almost the whole phone screen. This will have to be on all pages with banners except the homepage though. You can see an example on this page https://www.themkcreatives.com/about and all other pages like this one too https://www.themkcreatives.com/greece.

Ideally, at the same time, the images would also need to scale with the container to show the content on mobile not cropped.

Thank you guys!

@media screen and (max-width: 999px) {
	.js-page-banner-image {
		height: 100% !important;
	}

	.page-banner-wrapper.page-banner-has-image {
	    height: 75vw !important;
		max-height: 72vh !important;
	}
}

On 6/25/2020 at 1:59 PM, rwp said:

@media screen and (max-width: 999px) {
	.js-page-banner-image {
		height: 100% !important;
	}

	.page-banner-wrapper.page-banner-has-image {
	    height: 75vw !important;
		max-height: 72vh !important;
	}
}

 

Thanks RWP. That works, but some images don't resize correctly and get sort of squeezed into the frame like the one attached