Text not displaying properly on mobile

[afa1]

Hi pretty much any text on my site that continues onto the next line will cut the last word off and con

tinue it (< like this ) it is happening in my header, footer, general text blocks and headings all over my site. i need this fixed asap. @adam

my heading is reading like this on mobile 

AFRICAN FAB

RICS AUSTRA

LIA

instead of

  AFRICAN 

  FABRICS
AUSTRALIA

who knows what my issue is and how to fix it

africanfabricsaustralia.com

[WebfireThemes · Accepted solution]

Hi

Try adding this to the bottom of the main_style.css file or main.less file

.banner-wrap .wsite-header-section .wsite-content-title{word-break:normal!important}

I think you could also add the below into the "header" or "footer" code section of the css

<style>

.banner-wrap .wsite-header-section .wsite-content-title{word-break:normal!important}

</style>

Let me know how you get on.

[ClareMoore]

Hi there Adam & Team, 

I am having the same issue with text (titles/paragraph titles) on my website - when viewed on a mobile phone, parts of words are getting pushed onto the next lines.

Any suggestions on how to fix this?

My website is claremooredesigns.com.au

Cheers,

Clare

[Bernadette3]

Thanks for posting, Clare 😊

I checked your site on my mobile device, but I do not see parts of a word cutting off onto a new line. Can you post a screenshot of what you see from your end? 

[Flora22]

I've got the same problem - text all over the place on mobile view but I don't know much about CSS and can't work out where to insert this.  Where do I find  main_style.css file or main.less file?  Mind you I see from thread above that this hasn't worked for someone.  The website is www.waitatabayaccommodation.co.nz

[Adam7]

Your text doesn't look to be splitting in weird places to me, @Flora22. Are you still seeing that?

[Adam7]

Our engineers are working on fixing that, @afa, Sorry for the trouble! You're welcome to try the solution offered by @WebfireThemes in the meantime, though.

[cf12]

Hi Adam,

I am having the same issue with my Weebly site and found this thread via a google search. Can you provide any type of update with respect to a Weebly fix?

Thank you

[Queso]

Hello cf1! Sorry for the trouble. Our team is still at work clearing the issue up here, and will have a fix out ASAP.

[PCPOP]

Is there a step by step guide to implementing the workaround for someone not familiar with manipulating the CSS files?

[Adam7]

This was fixed, actually. You'll need to re-publish your site though if you haven't done so in a while.

[stefaniegass]

Hello, my site just started wrapping words in each page. This is happening on my desktop too...

I used the header and footer code presented in this thread but the titles are still wrapping, can you please help?

www.stefaniegass.com (click on courses or blog and you'll see an example)

[Djb11]

I am also having this problem, but only when viewing my website on mobile devices. 

[Adam7]

Our engineers fixed this again, @stefaniegass - if you re-publish your site should look much better. Sorry about that!

[Eliesha]

We are having the same issue with our site.  Our website is mockelprecast.com. I have been reading the threads and see that it was supposedly resolved in 2017 but we are still having issues.  

[TM21]

If this issue was resolved in 2017, a similar issue arose since then and it remains unresolved. I came across the issue in early 2019 and worked with Weebly support in this forum and on the phone. It was ultimately explained to me that the Weebly responsive template was behaving exactly as it was designed to. That is to say the Weebly responsive templates WILL NOT resize text automatically so words don't break across lines.

The only way I was able to get text to display at the appropriate size using Weebly templates was to install the ‘Hide’ app and create two text areas. One text area includes smaller text that is set to be hidden on medium and large screens, and one text area contains larger text that is hidden on small and extra small screens. It's a lot of manual tweaking, but it was the only way I found to get larger text to display properly on mobile devices. I assumed the responsive template would handle this automatically, but it does not.

This is the Weebly hide app I used:

https://www.weebly.com/app-center/hide

Maybe someone else will chime in with a better solution, but I think this is what you're stuck with.  Good luck with your site.

[hopeshutt]

I'm having the same problem and it inexplicably started today. I didn't do anything different with my site but for some reason - same as the original poster - my words are cutting off at the end of each line and continuing the word on the second line. What gives?

[WebfireThemes]

Hi @cf1

Don't forget if you implement this fix using the second method (Adding the code into the header/footer settings in the seo section of the weebly dashboard) it won't count as a "Theme customization" so when weebly fix and roll the update out, you can quickly and easily remove the code from the seo section and the fix rolled out by Weebly will take effect automatically.

The workaround I provided will quickly get you out of a bad looking website if it's already live

[jsala]

Hi. I've tried inserting the code above several ways and my text is still getting cut off on mobile.  Could you please clarify where / how to insert the code?  

I have tried putting the code in the header or footer boxes (and also both) of the overall site (Settings > SEO) and the SEO Settings for an individual page but my text is still cut off. 

Thanks! 

[WebfireThemes]

Hi jsala

Few questions

1. Please confirm exactly what code you're putting in your header/footer section in the SEO section nof the website

2. Please confirm if there is any other code currently in there (if there is try adding before and after the code that's already inthere)

3. Have you made any other customizations to the theme

4. Please could you provide the URL of your website so I can inspect.

[jsala]

Thanks so much!  

The website is: www.sps-travel.com.

I was putting in the code below and the header and footer fields are otherwise blank. I haven't made any customizations. 

<style>

.banner-wrap .wsite-header-section .wsite-content-title{word-break:normal!important}

</style>

Much appreciated!  

[jsala]

The page "What We Do" has the most problems.

[nick111]

I'm following this also.  I just built my first ever domain last week through weebly.  Everything looks fine on desktop, but words in headers and body are being cut/carried over to next line when you view in mobile.  I know nothing about code and have only "dragged/dropped" my site.  Although my site is currently published, I will be publicizing it in the next two weeks.  The split words on mobile make it look even more amateur than the simple website that it is.  

Please, please, please, can someone give me a set of simple, idiot-proof instructions on how to add the codes shown earier in this thread?  I have no idea where, exactly I enter it.

Thank you kindly for your assisitance!