Header text breaks words between lines?

Site URL: https://haddock-crocodile-e7d3.squarespace.com/

Hi everyone,

My clients site is ready to go live but there is an issue when viewing on mobile view. The text title (which is set to a heading) pushes part of a word onto the next line? I can find code to stop justification of text but nothing on how to force mobile view to have words read properly?

See the screenshots to show what I mean.

https://haddock-crocodile-e7d3.squarespace.com/

sundial

The above is how to view the site.

Hoping this is an easy fix as it makes the text illegible and ugly.

Thanks in advance.

2 hours ago, rwp said:

That's happening because you have spaces between every letter.

Remove all the spaces and add this to your CSS

#block-yui_3_17_2_1_1598522306783_21272 h2 {
    letter-spacing: 1.2rem;
}

 

Hey thanks that worked a treat!

I have a similar issue with a client site where the H2 text breaks on a letter rather than a word on some breakpoints.  Are there any work arounds to this issue?

On 1/11/2023 at 9:43 PM, Trish0308 said:

I have a similar issue with a client site where the H2 text breaks on a letter rather than a word on some breakpoints.  Are there any work arounds to this issue?

 

If you share link to page where you have problem, we can help easier