Fotoz
@Fotoz
Начинающий

Как сверстать подобный заголовок?

Desktop 5a7da6ceae2f3604626942.jpeg
Adaptive 5a7da6dcc4880392634053.jpeg

Подскажите, как сверстать этот заголовок? На десктопе я сделал его с двух частей через p, второму p дал text-align: right и добавил разделитель через ::before. И в принципе тут проблем у меня не возникло (думаю это не лучший вариант, но сделал как смог). Вот уже когда этот заголовок нужно сделать адаптивным, то тут появляется сложность.
Я убрал у второго p text-align и просто дал им разные padding-left, чтобы добиться такого результата как на скриншоте, но этот отступ часто приходится корректировать в media, чтобы он всегда оставался примерно таким как на скриншоте. Плюс еще и разделителю тоже постоянно нужно корректировать позицию.

Извините за мое нубство, надеюсь поможете и разъясните как такое верстать более профессионально.
Вот ссылка на гитхаб с этим заголовком https://github.com/Fotoz/surface

p.s доп. вопрос: "когда адаптируешь макет, то достаточно пройтись по основным точкам 1200px,. 992px и т.д. или нужно чтобы везде все было идеально?"
  • Вопрос задан
  • 286 просмотров
Пригласить эксперта
Ответы на вопрос 2
alvvi
@alvvi
export default apathy;
На десктопе я сделал его с двух частей через p, второму p дал text-align: right и добавил разделитель через ::before.

А чем вам h1 не угодил? Внутри можно span-ами разделить с display: block, и все будет семантично.
Вариант со второй картинки делается с помощью max-width, без паддингов. ::before нужно спозиционировать только один раз, а родителю добавить position: relative.

p.s доп. вопрос: "когда адаптируешь макет, то достаточно пройтись по основным точкам 1200px,. 992px и т.д. или нужно чтобы везде все было идеально?"

Нужно чтобы везде было идеально, но проходишься в итоге все равно по точкам, желательно вообще не иметь @media не соответствующих заранее определенным брейкпоинтам (хотя есть исключения).
Ответ написан
dom1n1k
@dom1n1k
Не надо верстать, надо двумя растровыми картинками, переключаемыми по медиа-выражению.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы