Как исправить проблему?

Question

[Ольга]

при скролле страницы в мобильном кнопка закрытия попапа наезжает на контент. Как это можно исправить?

Answer 1

[Ankhena]

Варианты:
1. Вынести крестик за пределы попапа (возможно, с добавлением фона). (Типа top: -30px и/или right: -30px. При этом сам блок должен иметь соответствующие margin, чтобы все это не вылезло за пределы окна)
2. Задать внутренние отступы попапу. (padding: 30px 10px 10px)
3. Не использовать абсолютное позиционирование для крестика, а задать ему float right и margin. Тогда контент будет обтекать крестик.
4. Форматировать текст так, чтобы он не попадал под крестик. Это возможно только, если текст условно-постоянный.

(Значения отступов написаны исключительно для примера, реальные подберите самостоятельно)

Answer 2

[Антон Иванов]

Как пример. Оберните текст в div и добавьте ему правый паддинг.
<div style="padding-right:30px;">Ваш текст</div>

Comments

[Ольга]

этот способ не подходит, так как тогда у текста будут разные отступы

[Антон Иванов]

Ольга, Сделайте их одинаковыми

<div style="padding-right:30px;paddin-left:30px;">Ваш текст</div>

Answer 3

[Андрей]

Добавить паддинг справа контенту, задать белый фон крестику, опустить ниже scrollable область, тут от дизайна отталкиваться надо, способов тьма

Answer 4

[Сергей ZSA]

Если не хотите менять внешне никак - то тогда просто поставьте перед "на" <br>. Для десктопов скройте его через display: none; а для мобильных наоборот покажите. Этого будет более чем достаточно.