1. Каких-то проблем с изображением не своем девайсе не увидел.
2. Текст в желтом круге съезжает из-за padding и/или не понятно, зачем добавленного пустого параграфа
p
Вообще лучший способ центровки элементов (лично мне больше всего нравится) это:
.circle{
position: relative;
}
И чуть чуть магии
.circle .circle-block p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Этот блок будет всегда отцентрован вне зависимости от размера родителя и ребенка. (В данном случаем может нужно будет задать max-width:100%)
В некоторых случаях лучше поиграть с флексами.
Всю верстку не смотрел, но что касается кнопки (пригодится на будущее), что бросилось в глаза - структура может быть проще.
Какой смысл вкладывать в еще один
div .circle-block?
.circle-block не содержит стилей.
p и
.circle-block - оба блочные элементы. Так что
< div class="circle-block" > явно лишний.
Возьмем чуть выше класс называется
img-left - а блок по центру. Недочет, которые может запутать при чтении кода.
Простой
