Почему выходит разное отображение сайта при перезагрузке страницы?

Question

[Max]

Здравствуйте, подскажите пожалуйста что не так. Проблема возникает только на телефоне, при перезагрузке страницы раз через раз меняется отображение. Один раз все хорошо, второй раз буква налазит на букву, на третий вообще вниз смещается.
Ссылка
Буду благодарен за помощь. В инспекторе браузера, при проверке на мобильных такой проблемы нету.

Comments

[OVK2015]

Подключите саму трубу к компу,- быстрее будет
https://developer.chrome.com/devtools/docs/remote-...

[Max]

OVK2015: Похоже это вариант только для android, а у меня windows..

[OVK2015]

Max: Тогда, сорри.

[Алексей Немиро]

Много файлов стилей. Если что-то не загрузится, то на выходе результат будет соответствующий.

Например,

если не загрузился файл: https://cdnjs.cloudflare.com/ajax/libs/twitter-boo...

Лучше стили собрать в один файл и размещать на своем сервере, в идеале с кешированием.

[Max]

Алексей Немиро: Спасибо, попробую

Answer 1

[qbStOne]

Проблема в отображении не только на мобильном, я открыл в фаерфоксе на маке — имя также слетает на 2 строку.
Проблема в самой верстке. Вы задали для части имени блочное отображение с обтеканием (float: right), да еще и жестко ограничили по ширине. Поэтому оно то наскакивает, то слетает.

Если кратко и быстро, просто поправить то что есть, чтобы работало корректно:
1. Уберите пробел в верстке между "J" и span.normal-bold
2. В CSS у span.normal-bold уберите float (таким образом вы уберете блочное отображение по правому краю и span снова станет inline — заработает white-space: nowrap, заданный для h1 — имя больше не будет слетать на вторую строку или наскакивать, — всегда будет в 1 строку)