How to adjust header menu picture for desktop and mobile?

https://www.calsharkey.com/

I'm using a custom header for my homepage to display a scrollable gallery underneath the header/navbar, it works great but the problem is certain pictures look good on mobile but not desktop, or vice-versa. For example this one:

As you can see it doesn't work for desktop since it hides the name/menu. I just need to adjust the height/position of it so the white sky is the background for the black text. I have a lot of pictures like this, is there some way to lock the position in place where I need it? I can't find any options in the gallery settings that let me do this.

Here's the code I'm using for the header as well:

body.homepage article section:first-child {
    padding-top: 0px !important;
}

Thanks for any help! Really appreciate it.

I think you can consider using a solid color header for this case