Page titles overrun screen size in mobile view - sustainable solution?

Question

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

Answer 1

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%
}