Как сделать текст за текстом?

Question

[mindx]

Суть такая: есть заголовок, на фоне буквы. Я его вроде бы сделал, но при мобильной версии буква на фоне уезжает... Что сделал не так? Поправте плз
https://codepen.io/Mindx/pen/zWWKJg мой код
Как нужно
и как у меня

З.Ы на дестопной версии все ок

Answer 1

[OneTwoThreeFourFive]

.section-header {
  display: flex;
  align-items: center;
  justify-content: center;
}
h2 {
  text-align: center;
  font-size: 50px;
}
p {
  position: absolute;
  z-index: -1;
  color: #bbb;
  font-size: 100px;
  top: -80px
}

<div class="section-header">
  <h2>COPY</h2>
  <p>COPY</p>
</div>

Comments

[mindx]

Спасибо!
Вопрос, а почему с тегом p работает, а через span нет?

[OneTwoThreeFourFive]

Работает, просто уберите top: -80. Я для примера использовал p.

[mindx]

OneTwoThreeFourFive, благодарю!

Answer 2

[Brake Made]

Используйте media запросы под каждое расширение экрана.
подробнее : Тык

Comments

[mindx]

Ну про медия я знаю.
Что косаемо кода, есть недочеты/мб иначе можно сделать?! Учусь только

[mindx]

По сути через медиа, вообще можно убрать...
Тк на мобильнике это сути не будет играть.
Мне важна сама практика, что правильно, что не правильно, и как правильно сделать.

[Brake Made]

mindx, касаемо кода все ок, мне нравится. Единственное что могу еще посоветовать это css validator : Тык.
а если все таки охото все красиво под все виды экранов : Bootstrap хорошее решение .

Answer 3

[Юпитер Макс]

Можно сделать плавающий контент и z-index

https://jsfiddle.net/sda3f56t/7/