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.

[cf12]

Hi Webfire Themes,

I was hesitant to insert the code (that's why I use Weebly - not to code) as you recommended but thank you for providing a fix for everyone.  As a temporary solution I reverted to an old theme and turned off the mobile option. Obviously it’s not as nice as the responsive new themes (when they work properly) but it will work until Weebly come up with a solution. If they do is yet to be seen….

Thanks again

[Adam7]

I've updated the ticket with our engineers to see if I can get an update. Hopefully it should be fixed quickly so you can switch back to the theme you're using. Thanks for providing a quick solution for people, @WebfireThemes.

[AnnaT]

Thank you for the update! I hope it gets fixed soon. My text in my blog posts have gone back to normal but now it's just the titles of my blog posts. It just makes things look messy and grammatically incorrect. I tried putting in a ticket for it and that was a mess and a big headache. However, I have found this community helpful. 

[PCPOP]

@WebfireThemes

Thank you for the assistance you've outlined here. However, I am new to this community and unfamiliar with manipulating CSS. We published our site not realizing this would be an issue. Can you insert a screen shot of where the info should be inserted? My issue is similar to everyone elses, where the text wraps and drops either the first or last letter of the word.

I appreciate any assistance you can provide.

[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)

[D70Tech]

I have this issue on the MAIN website on a computer as well. Suddenly nothing is wrapping correctly. I have a professional presentation in two weeks that is tied into my Weebly site. Help!

Thanks

[MaggieBird]

A month later and this is still happening. It just started happening to my blog posts. Please fix this asap! And don't tell me to start adding code. I went with Weebly because it's supposed to be easy and I don't have to add code.

Thanks
Maggie

[WebfireThemes]

Hi Maggie

Quite right too... the code suggestion is just a workaround until Weebly actually fix the issue!

[LaurenAlise]

Hello,

I am having the same issue with my site: www.laurenaliseschultz.com

I want the opening line "Lauren Alise Schultz is a communications specialist and fundraiser who will help you get plugged into donors, volunteers and customers" to remain on two lines, breaking between "get/plugged" when on mobile/tablet.

I want headlines like "Marketing & Communications" to render on 1-2 lines, but instead they're showing up like:

Marketi

ng &

Commu

nication

s

One thing that I've noticed is that while I've set the title text and body text to be properly sized in proportion to each other on the desktop view, and the body text sizes down appropriately on mobile/tablet, the title text remains the same size and so is grossly out of proportion (too large) on the tablet/mobile. How do we get the title text to simply size down?

I have tried applying some of the coding suggested in this thread to the end of the main css file, which hasn't worked, but I agree with the comments of one or two other users in this thread - I don't want to mess with the code, the whole reason that I'm paying for a service like Weebly is so that I don't have to mess with code that I don't understand.

Honestly, if Weebly can't figure out how to make the mobile & tablet versions of my site appropriately responsive, I'm going to take my business and my site elsewhere pretty quickly, since over 50% of all web traffic is now via mobile devices. This should be a TOP priority for Weebly. I cannot stress that enough.

Please help me adjust my titles so that my mobile site doesn't look like crap! I'm supposed to go to a networking event TONIGHT and pass out business cards with my URL.

Thanks,

Lauren

[Adam7]

In order to make that text only use two lines you would have to make the font extremely tiny; something around the size of 8px, which would make Google unhappy in terms of mobile readability. One of the foundational aspects of a good mobile site is that the fonts are somewhat larger than a desktop for improved legibility. Your site looks pretty good on a mobile device to me, @LaurenAlise; everything is easy to read and nothing is positioned oddly. I also didn't see the strange word breaking - did you make any changes to your custom theme since posting?

[LaurenAlise]

@Adam yes, sorry! I made a TON of changes after I posted. I realized based on what I had told you - that the body text seemed to resize appropriately, just not the headlines - that I could replace all the headlines with "body text" that was larger on the desktop site and it would resize appropriately for mobile. I don't completely love how the mobile site looks, but it's WAY better than it used to be. The font size of the headings was literally staying the same exact size on the mobile as it was on the desktop. Maybe it's an issue with that particular template? In any case, I found a decent workaround, but I think that's a huge oversight overall, whether it's with this particular template or Weebly in general. I agree headlines should stand out on mobile, but they shouldn't be huge and eat up the entire screen.

Thanks for responding.

[Adam7]

I agree - big is good but not massively huge. It's hard to say right now why that happened but I'm glad you got it working better!

[BruceFraser]

Hi Adam,

Re: "which would make Google unhappy in terms of mobile readability"

That's what just happened to me. That is, I got an email from Google which listed a couple of problems on our website, under the category "Mobile usability." One was "Text too small to read."

I haven't changed settings in more than a year. I have edited only text and images.

Anyway, you mentioned in another thread that the Weebly responsive theme can specify settings for mobile display in some special file. Will you pleae give instructions how to do that, or point me to a place where that is already explained?

Thanks!

The website: www.StirlingUnitedChurch.ca

P.S. The other error Google noted was "Clickable elements too close together." Yes, I can see that in the footer when I read it on my phone. I expect that's quite a bit more difficult to amend, so I'll leave that for now. Besides, fixing the text is the top priority.

[Adam7]

Thanks for your post, @BruceFraser. I think the links in your footer are definitely the "too close together" message. As for your text, it might be a result of using an older, non-responsive theme. Those themes were retired a while back, and probably are not up to Google's standards for mobile devices in some aspects. If you switch to a new theme it'll probably resolve that for you.

[Adam7]

You don't need to add any code to fix - a quick re-publish is all that's needed. This was fixed last month, though it was unfortunately re-introduced again yesterday. Our engineers quickly released another fix for it, though anyone who published during that time frame will need to publish again to incorporate that.

[ZachA]

All you need to do is go to Settings, then SEO, then scroll down to Header Code.

Insert the following into the Header Code section.

<style>
* {
word-break: normal;
}
</style>

Once this issue is fixed by the Weebly team you can just remove the code later.

If anyone wants to know how this works, then the explanation is below.

The <style> tag inserts CSS into a HTML document.

The * selector selects everything to take on the following property.

The word-break: normal property tells the document to break all of the words normally.

The </style> closing tag closes the CSS insert.

[nick111]

Again, I'm not a 'techie'.  I followed your instructions and it worked perfectly.  My site shows up flawlessley on mobile now.  Thanks so much for your help!  I'm very grateful!

Have a great day.

[PCPOP]

Thank you!

[Chris_inc]

Hi,

i have the same problem on reel-inc.com on the Mobile-Site

Greets

[Adam7]

Can you try switching to a standard theme, @Chris_inc? That might fix the issue for you.

[TM21]

I'm building a site using a responsive template and the text in Title sections does not resize when displayed on mobile. I've seen multiple responses in this thread indicating the issue was resolved and coding isn't required.  Has the issue resurfaced, or am I overlooking a setting?

My site is iconnetworks.com