Как исправить, чтобы оно работало?

Question

[Александр]

Всем привет, друзья! Увлекаюсь версткой. Есть макет: https://storm-coder.github.io/
При просмотре на мобильных устройствах:
1. В хэдере неправильно масштабирует фоновое изображение (отдельными участками). Это из-за плагина parallax.js?
2. В разделе "About us" надпись (в желтом круге) "our story continues", которая должна масштабироваться по центру - съезжает вверх. Как исправить?
И вопрос к опытным верстальщикам: что в целом думаете о верстке этого макета?
Спасибо

Comments

[Дмитрий Лузанов]

"что в целом думаете о верстке этого макета?" первое что бросилось в глаза: собери все иконки в спрайт, минифицируй фото на бекграунде

Answer 1

[IvanKalinin]

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 - а блок по центру. Недочет, которые может запутать при чтении кода.

Comments

[Александр]

Спасибо, мужик! Я только учусь и это ценные для меня советы.