2

I have built a site in German and some of the page titles are quite long. When viewing the site in a mobile view some of the page titles disappear off to the right hand side of the screen, thus the user can only see the beginning part of the page title.

Is there something I can apply via css/plugin/php which will 'wrap' the word onto the next line to make this more user friendly?

An example of a page which does this can be found here

I'm open to any suggestions. Thank you. D

Edit:Linked removed fro privacy

Improve this question
4

The following would cause the word to wrap.

h1.article-title {
   word-wrap: break-word;
}

However, you'd probably be best just changing the font size at that breakpoint - this would keep it more legible.

This is line 186 of templates/buildr/css/custom.css

Change 

h1 span, h2, p, h4 a {
    font-size:80%!important;
}

to something like the following

p, h4 a {
    font-size:80%!important;
}
h1 span, h2 {
    font-size:50%!important;
    word-wrap: break-word;
}

h3 {
    font-size:100%
}
Improve this answer
2
  • Thank you Richard, that has done the trick I believe - and thank you for bringing my attention to the word-wrap class, I wasn't aware of that either. – Dtorr1981 Jun 20 '17 at 11:58
  • This is a good answer. For more information on solving these types of problems, there is a recent article at: css-tricks.com/handling-long-unexpected-content-css – Neil Robertson Jun 22 '17 at 0:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.