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.

[Bernadette3]

It looks like your site is password protected, @TM2. It might also be helpful to make a copy of the site, then revert the copy to a standard theme. It's possible something in your custom code is causing the error and we need to eliminate that first. Thanks! 

[TM21]

Thanks, I have removed the password protection from the homepage so you can see the display problem. 

You can see the issue in the headline at the top of the page, as well as in the green Voice Communication area. The text isn't being reduced enough, and words are being cut across two lines:

Voice Communicati

on 

I tried adding the code suggested in this thread to see if that fixed the issue, but I haven't added any other custom code to the site. 

[Bernadette3]

I seem to recall this being an issue when using the Headline element (which is the "title" element inside a header)... although off-hand I can't recall if this is a theme specific issue. I'm checking with support, but forgot to ask if we have permission to publish if needed? 

[TM21]

Thanks a lot for your help, Bernadette.

[TM21]

I've switched my template from Muse to Dusk 2 in order to have a search box in the navigation area, but now text  is not resizing to display correctly on mobile.  You can see a couple examples in the header of my site, iconnetworks.com, as well as in other sections further down the page.  I'd previously been able to avoid this issue by using Text boxes instead of Title boxes while using Muse, but that doesn't work with Dusk 2.  I added the code suggested in this thread to the header code of my site via the SEO settings, but it did not fix the issue.  Is there a solution to keep text from breaking across two lines? For example:

Voice Communicati

on 

[Bernadette3]

I know some codes are theme specific, but maybe Adam or another user can confirm for this one. Also, have you tried using the Hide app? You can use it to display the resized content for each of your screens. 

[TM21]

Thanks, I checked out the hide app.  It is useful, but hiding all the titles and text that doesn't display properly on my site won't be a good long term solution.  

Adam, is there a different code that needs to be added to Dusk 2 in order for the text to resize properly on mobile displays?  Are you aware of any issues that would prevent Dusk 2 from behaving responsively?   

Sorry for the delay, I though I had responded to Bernadette's suggestion last week.

[TM21]

I'm following-up on this issue.  Fonts on my site are still too large on mobile displays, and words are being broken across multiple lines.  The problem occurs in title fields as well as in text fields.  Is there a specific code that needs to be added to Dusk 2 in order for the text to resize properly on mobile? 

www.iconnetworks.com 

[Bernadette3]

Sorry to hear you are still trying to sort this out, @TM2 I don't think Adam saw your previous reply but he will be back in tomorrow. 

[TM21]

Adam, I've attached four screenshots from our homepage to illustrate the problem.  Can you let me know what code needs to be added to Dusk 2 so text behaves responsively?

[Adam7]

How long ago did you make your custom theme, @TM2? There was an issue with a few of our themes with text that was getting split, though we fixed it. However, if a custom theme was made from one during the time before it was fixed then it will remain in that state (since we don't push CSS/HTML changes to custom themes). The quick solution is switching to a standard theme, although if you are familiar with HTML and CSS you can also fix the CSS issue yourself.

[TM21]

Thanks for the help, @Adam.  I'm sorry, I'm not sure what you mean by custom theme, but both themes I've used have been selected through the Weebly interface.  I initially started building a site using the Muse theme in early February.  The site was switched from Muse to Dusk 2 in mid-March. 

Won't changing the current site from a responsive theme to a standard theme make the text issue on mobile worse?  I thought the benefit of responsive themes was text and images resize automatically for smaller screens. Sorry if I am misunderstanding your solution. 

I have a little experience with HTML, but would need some assistance to fix the CCS myself. 

Thanks again for your help, apologies if I'm asking poor questions.

[Adam7]

All our standard themes are responsive, so you won't be losing any responsiveness by switching. Also, all it takes to make a custom theme is to go into the Theme editor after clicking "Edit HTML / CSS" and save the theme, so it's very possible end up with a custom theme even if you didn't actually change anything.

[TM21]

Got it, I'll reload the Dusk 2 theme on a copy of the site for testing and let you know the results.

[TM21]

I copied the site and chose Travellin - Dusk 2 from the business themes @Adam .  When I look at the updated theme with the mobile preview option the text is still breaking awkwardly across lines.  For example:

Do I need to publish the theme for the text to display correctly?  

[Bernadette3]

If it is the copy site I would publish to verify. The mobile preview should give you an accurate representation of what the site will look like on mobile, but it's not meant to be 100% correct since it is a mobile mockup through a desktop browser. 

[TM21]

I called in to Weebly support for help publishing the test copy of my site and it did not resolve the issue.  I wanted to post the feedback I received on the call as it may be helpful to others who are having problems with text not displaying properly on mobile devices.  Ultimately, it was explained to me that the responsive tempate I'm using is behaving exactly as it was designed to, which is to say the Weebly responsive template will not resize text automatically so words don't break across lines. 

The only way to have text display at the appropriate size using Weebly templates is to install the Hide app and create duplicate text areas with smaller fonts for mobile screens, and hiding those text areas on larger displays. It's a lot of manual tweaking.  I assumed the responsive template would handle this automatically, but it does not.