How to change banner font size for mobile view ONLY on Squarespace 7.0 Five template

Hi everyone,

I recently updated my banner background to include a graphic, but it overlaps with the banner text on mobile view. I've tried everything I could find online and nothing has helped resolve this. I've tried moving the focal point so that it only zooms in on the plain part of the background on mobile view but that didn't help. I've tried just about every custom CSS code to either show a plain color instead of this banner image or to be replaced with an alternate image on mobile view. I can't add an image block on top of my banner image to display a different image on mobile only. I'm not sure if the problem is my version of Squarespace or my template-- but I'm out of ideas.

At this point, all I want to do is change the size of the banner font on mobile only in hopes that it won't overlap with the graphic on my banner image anymore. For reference, this is what I'm working with. Any help would be much appreciated!

My editing sidebar also looks like a different version than all the others I've seen in videos, I'm not sure why. But I don't have any mobile options available to me except to disable mobile view. 

The dashboard has had a minor rearrangement recently, but most of the options are still identical.

16 minutes ago, embeyer said:

I've tried moving the focal point so that it only zooms in on the plain part of the background on mobile view but that didn't help.

In what way didn't this work? It normally isn't a problem to move the focal point so you don't get an overlap.

I'll give you some code to change the font size on mobile, but I'm not sure it'll give you the result you want:

@media only screen and (max-width:640px) {
  #page-title {
    font-size: 8vw;
  }
}

@Ziggy

I'm not sure why it doesn't work, but even if I move the focal point to the bottom right corner, it only slightly moves the graphic. Then it also messes up my desktop view too-- which I thought it wasn't supposed to in full view. 

However, your code worked to reduce the font size at least (so far no code I've used has done anything noticeable). The only issue is that it still overlaps on longer page titles.

If I change the focal point now, it doesn't overlap with the mobile title, but it changes my desktop view. Is there a way around this? Is there a way to alter the banner text to display on two lines but only for mobile view using code?

Thank you so much, I truly appreciate the help!