Text Runs off Screen

  • nondualcertitude · Member ·

    Hi,

    I’m just having difficulty optimising text for mobile screens.

    Basically, longer text sentences will run off the screen and sometimes not flow to the next line. This happens in mobile view.

    I am using the Button WordPress.com template, so I know my options are limited, but I think there must be a simple fix for this.

    Thanks in advance.

    The blog I need help with is: (visible only to logged in users)

  • mrfoxtalbot · Staff ·

    Hi nondualcertitude,

    I see what you mean, some of the titles in your most recent post are indeed running off of small screens.

    From what I have been able to see the problem is being caused by the inline styles you are adding in order to highlight your titles. You are adding color to each single title manually which seems to be breaking the text overflow (it should not be a problem, but in this case it´s breaking things on mobile).

    To avoid this text overflow but also to prevent other problems (allow for easy theme change in the future, optimized search engine indexing) I suggest you try and use a correct heading structure instead of adding inline styles

    You can add headings easily (the are here or here if you use the classic wp-admin) and you should use them respecting the hierarchy, starting with h2 because h1 is already used in the page title.

    If you are not happy with the current design of your headings you should change if globally. You can do this going to the “Fonts” sections in the Customizer. Here you will be able to set font families and sizes. Some themes will allow you to set the colors too (there should a be a general “colors” pannel) but the odds are that you will have to do that manually. In order to add custom styles you need a Premium or Business plan.

    I hope I was able to help.
    Regards.

  • mrfoxtalbot · Staff ·

    Hi again, Nodularcertitude.

    If you want to read more about the importance of using headings correctly here is a great article I suggest you read.

    Please let me know it you need further help with this issue.

    Regards.

  • nondualcertitude · Member ·

    Hi mrfoxtalbot,

    Thanks for your prompt suggestions!

    The solution was to iron out some HTML tags that were in wrong paragraphs. It turns out the bulleted HTML ‘

      ‘ was mucking up some lines, so I had to seperate it with paragraphs. In addition, the color formatting tags sometimes broke lines, subsequently being duplicated – I think this was my first attempt to fix but just compounded it. So I removed the duplicates as well.

      I did try your suggestions. Thanks for the article on Headings as well. The coloured text was not a heading though.

      I also updated the Theme to ‘Button 2’, which apparently has some minor fixes. However I can not modify any Heading formats to my knowledge, mainly the base font.

      Cheers

  • nondualcertitude · Member ·

    I am curious though, why this has solved the issue with normal formatted text, but not when the text is set to a block quote. I.e. When I choose to quote the bulleted text, the text run-off returns. It persists even when separating the paragraphs as before, in the HTML view.

    E.g. In the HTML view, I can backspace a whole line of text back to “10.” Then when I add a space after 10.:

    10.—-line of text———

    The text becomes:

    10.
    —-line of text———

    instead of (single space):

    10. —-line of text——–
    –

    Any final thoughts?

  • mrfoxtalbot · Staff ·

    Hi, nondualcertitude. I am happy my advice was of some help. The examples you provide on your follow-up question are not 100% clear. Could you please provide a link to the post?.

    Your run off problemas are most likely related to the word-break: break-all; CSS property but also to max-width:100%.

    Finally, the problems with the numbers jumping to the next line may be related to the extra < span > tag that is automatically added when you give inline style (colors) to HTML elements. This is a bit tricky since it is also related to the way the WordPress visual editor re-formats HTML. My suggestion is to avoid inline styles as much as possible.

    If you can provide a more specific example perhaps we can try a workaround.

    Regards!

  • nondualcertitude · Member ·

    Basically, the whole line moves forward another line, when I add a single space after the ’10.’. Moving or separating the Span tags doesn’t seem to help.

    How do you suggest to use that word-break script? I don’t think I’ll be trying much else after this…

  • mrfoxtalbot · Staff ·

    Hi, nondualcertitude.

    I can´t find any instance what you are pointing at in your comment. I tried editing the html and managed to add spaces without any problema. Could you please leave on of your < span > tags “broken” so I can see an example of the problem?

    Regards.

  • The topic ‘Text Runs off Screen’ is closed to new replies.