Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Header text breaks words between lines?


jasonconway
Go to solution Solved by rwp,

Question

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.

 

Screenshot 2020-09-28 at 14.18.37.png

Link to post
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Posts

Hey thanks that worked a treat!

Posted Images

2 answers to this question

Recommended Posts

  • 0

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;
}

 

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Link to post
  • 0
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!

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...