Ломается сайт, что исправить (псевдоэлементы сдвигаются на единицу)?

Question

[olya_097]

Ломается сайт, что исправить?

псевдоэлементы сдвигаются на единицу
вот проблема (возле единицы есть два псевдоэлемента
вот они и сдвигаются к цифре)



вот код https://codepen.io/anon/pen/XyRYLN

Comments

[xtress]

А у вас экран/разрешение не слишком маленькое? Ибо, у меня на кодпене оно выглядит как и должно...

[olya_097]

xtress, с разрешением все ок
проосто посмотрите перед переходом на мобилку
очень аккуратно

[xtress]

Как ни смотрю, что на трубке, что на пк, - ничо не меняется. Всё выглядит как и должно.
з.ы.
Проверял на:
а) пк - chromium 70.0; firefox 63.0;
б) трубка - safari мобильный

[olya_097]

xtress, проблема перед переходом на мобильную версию

[xtress]

olya_097, А вот теперь вообще не понял. Распишите, пожалуйста, поподробнее свой алгоритм действий, который приводит к данной проблеме. Что вообще значит перед переходом на мобильную версию?

[olya_097]

xtress, тоесть сначала открываю сайт на весь экран

потом уменьшаю экран и перехожу на планшет
и вот на нем перед переходом на мобилку возникает проблема
попробуйте плавно потянуть

[olya_097]

xtress, если интересно, то решила проблемы
добавила img {
max-width: 100%;
height: auto;
}

и всё стало ок

тут один человек в комментарии написал, что я не так верстаю
Вы согласны?

Answer 1

[азаза]

что куда сдвигается
опишите более понятно проблему

Comments

[olya_097]

возле единицы есть два псевдоэлемента
вот они и сдвигаются к цифре
проблема перед переходом на мобильную версию

на скриншоте нарисовала стрелку

[азаза]

olya_097,
элементам задаете позиционирование слева 0 справа 0
padding:0 30px(размер элемента + небольшой отступ)
короче не правильно верстаете

[olya_097]

Andrey, так а как правильно?

[азаза]

<div>
<span>№1</span>
</div>

div{text-align:center;}
span{padding:0 20px; position:relative;}
span:before{position:absolute; right:0; top:50%; height:1px; width:10px; background:#FFF; content:"";}
span:after{position:absolute; left:0; top:50%; height:1px; width:10px; background:#FFF; content:"";}

как то так

[olya_097]

Andrey, а где у меня не правильно то? я также, как и Вы пишу

по такому же алгоритму

какая разница что я задаю всё в пикселях, а Вы top:50%; в процентах?

[азаза]

olya_097,
как то так
https://codepen.io/deignerandrey/pen/MzmqWr
проблема в том, что вы не правильно задаете позиционирование для элементов

[olya_097]

Andrey, так а что именно в моем коде исправить? что добавить/убрать?

[olya_097]

Andrey, и я извиняюсь, в какой строчке padding:0 30px? я не нашла

[азаза]

у вас задано позиционирование от параграфа
параграф p идет во фсю ширину что не есть правильным, размер шрифта и сам шрифт может колебаться в зависимости от браузера и os
используйте для этого span
ему вы задаете отступы от левого края и правого напр. по 20px
и ширину псевдоэлемента напр. 10px
то есть, псевдоэлементы уже не наедут на текст в spane

[азаза]

olya_097, 20px поставил
можете ставить свои значения
это отступ спана по краям
т.е напр. 10px размер элемента и + еще расстояние 10px = 20px

[olya_097]

Andrey, извините, но я так и не услышала, где неправильно верстаю
использую p, а не span?

[olya_097]

Andrey, если интересно, то решила проблемы
добавила img {
max-width: 100%;
height: auto;
}

так такая верстка имеет право на жизнь? ведь все ок теперь