Почему текст наезжает на картинки?

Question

[Speakea1y1289]

Добрый день. Имеется следующий блок timeline:

Если уменьшать страницу или запустить данный код на смартфоне, то можно заменить, что картинка будет наезжать на текст. Уже много чего перепробовал, применял различные стили, но всё без толку, выглядит всё равно криво. Соответственно вопрос - что можно сделать, что картинка не наезжала на текст, а как минимум текст был под картинкой?
Должно быть примерно вот так:

Comments

[Максим]

я bs не пользуюсь - по этому на вряд ли я помошник

Answer 1

[saplas]

https://jsfiddle.net/mwLjz23t/3/
Не могу сейчас проверить, но попробуйте так

Comments

[Speakea1y1289]

Не работает:

[saplas]

Speakea1y1289, https://jsfiddle.net/hw60kvoc/2/

[Speakea1y1289]

saplas, Всё равно наезжает.
Ну да ладно - я проблему уже в большей мере решил данным решением:


Но есть и следующие проблемы:

1) Почему такое странное позиционирование блоков:



2) Почему текст расположен не на одинаковом расстоянии?


Поможете пожалуйста решить данные проблемы?
Вот сайт, где уже опубликовано данное решение - postroeno.bitrixstudio24.ru

[saplas]

Speakea1y1289, На вашем сайте не вижу проблем, с расстоянием могу предложить такое решение

a.timeline-content {
    max-width: 90%;
    width: 100%;
}

[Speakea1y1289]

saplas, Проблемы с расстоянием решились, но появилась новая - а именно уменьшились отступы между иконкой и "змейкой":

[saplas]

Speakea1y1289, с max-width поиграйтесь