text runs off the page on mobile devices.

gramercy_global · April 2016

I have a problem with headings running of the page on mobile devices, if you look at the page below and scroll down you will see that the text runs off, this happens in many different languages.

http://www.conservatories.de/ru/colours/

http://www.conservatories.de/

In the last one you can see the Leidenschaft runs off the page.

Any idea why this is happening? Shouldn't it resize?

Albert · April 2016

Hi,

as we can see, some headings are simply too big and long from mobile devices and that's why are cut. What you can do is use below css to wrap words on smaller devices:

h1, h2, h3, h4, h5 { word-wrap: break-word !important; }

gramercy_global · April 2016

Thank you for this, it does cut off the words in off places though, but at least it isn't running off the screen.

Albert · April 2016

This is how above css supposed to work of course. Move the letters that are out of the screen, below on smaller screens. If you want, you can also decrease fonts on smaller devices but this can be done with different css:

@media only screen and (max-width: 767px) {
    h1, h2, h3, h4, h5 { font-size: 25px !important; }
}

text runs off the page on mobile devices.

Comments