Subject's head cut off in banner when in landscape mode on mobile

I used custom css code to adjust the banner for view on mobile but when the orientation is turned to landscape the subject's head is cut off. 

Hi @Darine can you please include a link to the page you need help with?

Hi @SaranyaDesigns the page I'm struggling with is https://www.darlenedudley.com/

and https://www.darlenedudley.com/book

I had a colleague take a look and it's a little better but a part of the head on the home page is still cut off. 

Any help would be greatly appreciated. Thank you 

@Darine It looks like the image in this template is set to start at the top of the page behind the navigation in desktop mode regardless of how tall the navigation bar is, which is why that's happening. So the navigation is covering the top of the image. You can add padding or margin to the first block of content on every page in your custom CSS to overcome that like this:

@media (min-width:800px {
	.page-section:first-of-type .section-background {
		top: 100px !important;
	}
}
@media (min-width:641px) and (max-width:799px) {
	.page-section:first-of-type .section-background {
		top: 150px !important;
	}
}

Or if you JUST want this to happen on these two specific pages and not all the rest of the site, then you can include the body ID to limit your code just to those specific pages, like this:

@media (min-width:800px {
	#collection-651a42029bd6d313af619e60 .page-section:first-of-type .section-background, #collection-651a2e096ce641658310faa8 .page-section:first-of-type .section-background {
		top: 100px !important;
	}
}
@media (min-width:641px) and (max-width:799px) {
	#collection-651a42029bd6d313af619e60 .page-section:first-of-type .section-background, #collection-651a2e096ce641658310faa8 .page-section:first-of-type .section-background {
		top: 150px !important;
	}
}

Let me know if that works?