melkaya94
@melkaya94

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

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

(Значения отступов написаны исключительно для примера, реальные подберите самостоятельно)
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 3
@karminski
Senior React.JS Developer
Как пример. Оберните текст в div и добавьте ему правый паддинг.
<div style="padding-right:30px;">Ваш текст</div>
Ответ написан
@kvaak
FE
Добавить паддинг справа контенту, задать белый фон крестику, опустить ниже scrollable область, тут от дизайна отталкиваться надо, способов тьма
Ответ написан
Комментировать
serjikz
@serjikz
web-developer
Если не хотите менять внешне никак - то тогда просто поставьте перед "на" <br>. Для десктопов скройте его через display: none; а для мобильных наоборот покажите. Этого будет более чем достаточно.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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