Font breaks for heading fonts

When I look at the mobile format in Squarespace everything is spaced correctly, but on my phone the headlines break. I know that's because my phone screen must be a smaller dimension, but I can't figure out how to make JUST the mobile font smaller so it will fit on one line (for header 1) and not break mid-word (for header 2). I'm using the Basil template.

Add this to Custom CSS:

h1, h2, h3, h4 {
  -webkit-hyphens: manual !important; 
  -moz-hyphens: manual !important; 
  -ms-hyphens: manual !important; 
  hyphens: manual !important;  
}

Thanks! Where do I find the Custom CSS input?

Website -> Website Tools (scroll to bottom) -> Custom CSS, paste that code in and save.

There weren't any website tools, but I went to Website Settings > Developer Tools > Code Injection. I put the code in but it comes up in the design instead of changing anything.

On 9/15/2023 at 9:24 PM, JanetMarieG said:

There weren't any website tools, but I went to Website Settings > Developer Tools > Code Injection. I put the code in but it comes up in the design instead of changing anything.

If you add to Code Injection, you need to wrap code in style tag, unless it will appear in above header, like as your screenshot

<style>
  h1, h2, h3, h4 {
  -webkit-hyphens: manual !important; 
  -moz-hyphens: manual !important; 
  -ms-hyphens: manual !important; 
  hyphens: manual !important;  
}
</style>