Как исправить такое?

Question

[wakenbyWork]

Есть такая верстка:

Все отлично, но маленькая фотография сделана через position: absolute; и при сжимании экрана заезжает на текст, а в мобильной версии вообще за экран:

скрин

Я перепробовал множество способов как это исправить. Добавлял обертки, пытался обертке выставить padding-left в процентах, но ничего не вышло.

Накидал упрощенную версию, чтобы была понятна проблема.

упрощенный пример [CodePen]

реальный пример [CodePen]

Answer 1

[wonderingpeanut]

приветствую.
1. можно сделать из двух картинок одну.
2. можно обернуть картинки в контейнер и дать контейнеру position:relative, тогда маленькая картинка будет позиционироваться относительно этого контейнера
3. можно воспользоваться гридами

Comments

[wakenbyWork]

1. Маленькая картинка имеет анимацию, всплывает и праит. В этом и проблема))
2. Так они и обернуты в контейнер у которого position: relative.
3. А как? Можете привести пример? Никогда такое не видел))

[wonderingpeanut]

wakenbyWork, например так https://codesandbox.io/s/bold-night-0yugng?file=/c...