Illustratr Headline Wrap Text

  • Unknown's avatar
    avolanti · Member ·

    Hi, I’m updating my portfolio and it looks like the headlines of projects often have line breaks mid-word.

    e.g.

    HOLIDAY NEW
    SLETTER

    GRILLING EM
    AIL

    Is there a setting or code that can be added so that it will automatically adjust and wrap the text so that the full word just appears on the following line instead?

    e.g.

    HOLIDAY
    NEWSLETTER

    GRILLING
    EMAIL

    Thanks!

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

  • supernovia · Staff ·

    Hi @avolanti, can you send a link to the affected page so I can see what options are available? I’m not currently seeing the issue you described on the portfolio page.

  • Unknown's avatar
    avolanti · Member ·

    Hi @supernovia, thanks for the response

    I did some “testing” and when I view the pages on my mobile device, they look normal. However, when I’m editing through Appearance > Customize > Fonts and choose to preview on mobile, it displays with the poor line breaks. I also think the issue was worse when I had a larger font selected.

    Is it possible that it’s just an issue with the preview feature and that the actual page will always turn the words properly when out of space? I guess I’m just concerned someone using a smaller window screen size or mobile device will see the janky rendering.

  • staff-totoro · Staff ·

    Hi there,

    I also think the issue was worse when I had a larger font selected.

    Yes, that is typically the case. The way themes are coded, they work well with most font sizes, but sometimes you can pick a font that is physically “too large” to work well on mobile screen sizes. The theme deals with this as best it can, but as you point out the word breaks can become rather awkward.

    Typically the “fix” for this is to choose a smaller font, as you seem to have done here. I tested on my phone as well as using an emulator to see several common screen sizes and did not note any awkward word breaks.

    You could consider upgrading to the Pro Plan, and then using some custom CSS to override the theme coding so it can adapt better to showing a larger font size, but adjusting your font size is by far the most affordable option. Also, what you have now looks good to my eyes, for what that is worth!

    I guess I’m just concerned someone using a smaller window screen size or mobile device will see the janky rendering.

    I did a bit of digging on this and noted in testing that I was able to cause your site title words (as it is now) to break but only at the ridiculously narrow size of 190px. This is just not a size you see on devices these days, possibly on a really old one someone is still holding on to, but statistically speaking this is pretty much zero.

    For reference here are some of the common screen sizes that theme designers account for, and the smallest is 320px width, which would be fine for your site.

    Hope that helps. Please let us know if you have any more questions.

  • The topic ‘Illustratr Headline Wrap Text’ is closed to new replies.