Help with Shopify Dawn Image Banner Heading and Text Mobile Responsiveness

[CaseswithCauses]

I'm using the Shopify Dawn theme V11 and I've spent hours trying every other solution proposed, but cannot get the text in my image banner heading and subheading to resize for mobile.

On desktop, I think it's a little too big currently, I'd like it to show the entire Image Banner section in the window (currently it cuts off the image a bit at the bottom, so you don't see the full image without scrolling down), so I'm not sure if there's a way to reduce the size of that whole section or how that could be done. 

The other issue is that whenever I check it on mobile (I'm on an iPhone 13 Pro), It leaves the banner image at the top and moves the heading, text and the button down below the image. I understand there is probably too much text in the text field to fit in there without being too small to read, so I'm OK with that part being moved below, but is there a way to keep the title and the button in the same place they show up on desktop (centered above the AirPods cases and between the phones), or at the very least, at least the Heading (Cases with Causes)?

Lastly, if it's not too complicated, I've noticed on desktop, when resizing the window to make it smaller, the text ends up overlapping the images before it gets moved down below. Is there a way to set it so that it moves that text field down below the image when it gets close to the text overlapping the images instead of after like it currently is? 

Please see attached pictures and let me know if any additional info is needed. 1st pic is mobile, 2nd is mobile landscape, then the rest are showing what happens when resizing on desktop. Thanks!

Site is www.caseswithcauses.com
pass - Shopify1989

[topnewyork]

Hi, @CaseswithCauses 
Go to online Store > Customize and uncheck this 

[Moeed]

Hey @CaseswithCauses 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (min-width: 768px) {
.banner__media.media.scroll-trigger.animate--fade-in {
    height: 50% !important;
}
.banner__media.media.scroll-trigger.animate--fade-in img {
    object-fit: fill !important;
}
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[CaseswithCauses]

Thanks, but that just squished the image and took it out of proportion. I went with a different route now and I'm using two separate image banners for desktop and for mobile. 

The main issue I'm having now is just with the header text scaling with the browser window on anything bigger than mobile (I deleted the Cases with Causes header because the name of the site is now at the top menu bar, and I moved the text that was in the subheader to the header). All of that text that's now in the header section of the image banner just ends up overlapping the pictures and button and everything when the browser window is adjusted, and I think it may end up looking bad and unreadable on tablets and other sized screens. 

Is there any way to get to the text in that header (text that says "Custom cases supporting charitable causes. Click Here to see how, with a little help from you, up to 25% of proceeds from your order are donated to the charity of your choosing.") to scale properly in proportion along with the image banner for desktop?

[topnewyork]

Go to online store customize paste this code custom css 

@media screen and (min-width: 320px) {
  
h2.banner__heading.inline-richtext.h0 {
    font-size: 20px;
}

.banner__text.rte.subtitle {
    margin: auto;
    width: 220px;
    font-size: 12px;
}
.banner__media.media.scroll-trigger.animate--fade-in img {
    object-fit: fill ;
}
}

[CaseswithCauses]

Thanks for the suggestion! I tried playing around with that last night, but it never quite worked and everything was off a bit. I went with a different route now and I'm using two separate image banners for desktop and for mobile. The mobile one looks great, I don't want to mess with it, but still having an issue with the desktop.

The main issue I'm having now is just with the header text scaling with the browser window on anything bigger than mobile (I deleted the Cases with Causes header because the name of the site is now at the top menu bar, and I moved the text that was in the subheader to the header). All of that text that's now in the header section of the image banner just ends up overlapping the pictures and button and everything when the browser window is adjusted, and I think it may end up looking bad and unreadable on tablets and other sized screens. 

Is there any way to get to the text in that header (text that says "Custom cases supporting charitable causes. Click Here to see how, with a little help from you, up to 25% of proceeds from your order are donated to the charity of your choosing.") to scale properly in proportion along with the image banner for desktop?