mobile Text is splitting a word across two lines on mobile, leaving one letter hanging – how to fix?

Site URL: https://connectedcampers.squarespace.com/

Hey Squarespace community,

looking for a little help on how to fix this, or recognition of a bug that needs ironed out at Squarespace side. In passages of text, when looking at the site on mobile, I'm seeing it split words across two lines, forcing a single letter on it's own to the line below. Very odd and surely it's programmed to line break entire words (or atleast hyphenate them if there's a line split).

See the screenshot attached.

Hopefully some of you can help me to figure this out as I'm a little stuck and puzzled with this one!

Website: https://connectedcampers.squarespace.com/
Pass: sillysausages

All the best,
Asa

Hi,

Where is text? I don't see it on above link

On 9/15/2021 at 4:41 AM, tuanphan said:

Hi,

Where is text? I don't see it on above link

Hi Tuanphan, thanks for getting back on this. Sorry it was on one of the sub-pages:

https://www.connectedcampers.com/features

We changed the copy, to allow the site to go live against pressing deadlines (I'm sure you understand), but obviously it's an odd feature and a strange behaviour for a site to split a word without a hyphen. Have you seen it before? Are you aware of any ways to avoid it?

On 9/21/2021 at 11:44 PM, asa said:

Hi Tuanphan, thanks for getting back on this. Sorry it was on one of the sub-pages:

https://www.connectedcampers.com/features

We changed the copy, to allow the site to go live against pressing deadlines (I'm sure you understand), but obviously it's an odd feature and a strange behaviour for a site to split a word without a hyphen. Have you seen it before? Are you aware of any ways to avoid it?

Try adding this to Design > Custom CSS

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

10 hours ago, tuanphan said:

Try adding this to Design > Custom CSS

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

 

Fabulous thank you, I'll give this a shot.

Thanks,
Asa

I have this same exact issue on all my Squarespace sites. I've put that code into the custom CSS and nothing c changes. Is there another solution? It's an incredibly frustrating feature. 

Any ideas? I don't want hyphens either, I just want the words not to break. 

I've seen this topic come up a lot but haven't had any luck with solutions. As you can see in the screenshot, headline words break awkwardly in mobile view. 

I've found codes that remove hyphens but what I'm really trying to accomplish is to not have the word break at all.

Any tips?

On 2/23/2023 at 5:03 AM, brittanystatt said:

Any ideas? I don't want hyphens either, I just want the words not to break. 

What is your site url? We can check easier

I have the same issue, so do let me know the resolution to this! 

Add to Design > Custom CSS

/* Mobile Homepage Text */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1672682076358_28705 h1 {
    font-size: 38px;
}
}

On 2/27/2023 at 5:57 AM, acjr_noob said:

I have the same issue, so do let me know the resolution to this! 

What is your site url?

Amazing, thank you SO much!

@tuanphan 

https://blenny-sepia-7zas.squarespace.com/

PW: ACJR-assist

On 3/8/2023 at 1:39 AM, acjr_noob said:

@tuanphan 

https://blenny-sepia-7zas.squarespace.com/

PW: ACJR-assist

Add to Design > Custom CSS

/* resize text on mobile */
@media screen and (max-width:767px) {
.fe-block-8ebc50ca4332a254e1b5 h1 {
    font-size: 40px;
}
}

@tuanphan 

Is the code just forcing the text to stay at a certain size? New problem that arose is the text isn't flexible anymore so the margins no longer match and we have giant gaps when I turn to landscape mode on a mobile device.

The idea is to keep that text as large as possible to mimic the desktop styling best we can for the home page.
 

On 3/11/2023 at 1:32 AM, acjr_noob said:

@tuanphan 

Is the code just forcing the text to stay at a certain size? New problem that arose is the text isn't flexible anymore so the margins no longer match and we have giant gaps when I turn to landscape mode on a mobile device.

The idea is to keep that text as large as possible to mimic the desktop styling best we can for the home page.
 

With landscape mode, you can use this new code

/* resize text on mobile */
@media screen and (max-width:767px) {
.fe-block-8ebc50ca4332a254e1b5 h1 {
    font-size: 40px;
}
}
@media screen and (max-width:767px) and (orientation:landscape) {
.fe-block-8ebc50ca4332a254e1b5 h1 {
    font-size: 60px;
}
}

Thank you so much for your assistance!

Don't hate me but one more add-on that is nitpicky... can we match the margin? Like I mentioned the idea is to replicate the large text on the homepage so this detail will be great for first impressions. Please and thank you! 🙏

On 3/16/2023 at 7:23 PM, acjr_noob said:

Thank you so much for your assistance!

Don't hate me but one more add-on that is nitpicky... can we match the margin? Like I mentioned the idea is to replicate the large text on the homepage so this detail will be great for first impressions. Please and thank you! 🙏

You try increase text size in above code, I think that is only way

I tried and it doesn't work on my side. 😪 also seeing text splitting on other pages?

Here is the website: https://www.acjr.network/

On 3/22/2023 at 11:58 PM, acjr_noob said:

I tried and it doesn't work on my side. 😪 also seeing text splitting on other pages?

Here is the website: https://www.acjr.network/

That code works on one page only, which pages do you have problems with?

That would explain it! I will need for all pages then in the event someone other than me applies changes.

On 3/26/2023 at 2:37 AM, acjr_noob said:

That would explain it! I will need for all pages then in the event someone other than me applies changes.

If you need on all pages, try this new code

/* resize text on mobile */
@media screen and (max-width:767px) {
h1 {
    font-size: 40px !important;
}
}
@media screen and (max-width:767px) and (orientation:landscape) {
h1 {
    font-size: 60px !important;
}
}

@tuanphan I am having the same type of issue with my headers throughout my entire website. I would like it to not push letters onto the next lines. It's mostly when scaling it from desktop to mobile, but not an issue when it's at mobile. Screenshot attached is when scaling the homepage.

Sunsetlake.org

On 5/19/2023 at 7:44 AM, dmharris34 said:

@tuanphan I am having the same type of issue with my headers throughout my entire website. I would like it to not push letters onto the next lines. It's mostly when scaling it from desktop to mobile, but not an issue when it's at mobile. Screenshot attached is when scaling the homepage.

Sunsetlake.org

 

Which screen size do you see problems? We can use CSS code to resize text on these screen sizes