Сделать полноэкранное всплывающее окно адаптивным ⇐ CSS

[Anonymous]

Я делаю полноэкранное всплывающее окно для одного приложения.

Код: Выделить всё

  /* Full Screen Popup */
.fullscreen-popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255);
display: flex;
justify-content: center;
align-items: center;
}

.close-button {
position: absolute;
top: 10px;
right: 10px;
padding: 8px 16px;
border: none;
border-radius: 4px;
background-color: #f44336;
color: #fff;
cursor: pointer;
}

.popup-content {
position: relative;
padding: 20px;
background-color: #ffffff;
border-radius: 8px;
text-align: justify;
max-width: 80vw; /* Adjust max width for smaller screens */
overflow-y: auto; /* Allow vertical scrolling if needed */
}

/* Media Queries for Responsive Design */

/* Tablet and Larger Screens */
@media screen and (min-width: 768px) {
.details-container {
grid-template-columns: repeat(2, minmax(300px, 1fr));
}
}

/* Mobile Screens */
@media screen and (max-width: 767px) {
.details-container {
grid-template-columns: repeat(1, minmax(100%, 1fr));
}

/* Full Screen Popup Adjustments */
.fullscreen-popup {
padding: 20px;
}

.close-button {
top: 5px;
right: 5px;
}

.popup {
width: 90%;
max-width: 90vw;
}
}
img{
height: 50%;
width: 50%;
}

Код: Выделить всё

This is title of h2
[img]https://wallpapers.com/images/hd/720p-nature-background-7dtz4pan3cr3ot5v.jpg[/img]
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint assumenda, nihil voluptas adipisci dolor quisquam totam doloremque corrupti laudantium ad consectetur quaerat, optio quidem, nulla possimus laborum tempore atque. Ab.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint assumenda, nihil voluptas adipisci dolor quisquam totam doloremque corrupti laudantium ad consectetur quaerat, optio quidem, nulla possimus laborum tempore atque. Ab.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint assumenda, nihil voluptas adipisci dolor quisquam totam doloremque corrupti laudantium ad consectetur quaerat, optio quidem, nulla possimus laborum tempore atque. Ab.
Close

Я реализовал кнопку закрытия для корректной работы и удалил рабочую код из проекта, чтобы упростить мой вопрос.
У меня проблема в том, что иногда h2, всплывающее содержимое и кнопка закрытия не отображаются на экранах мобильных устройств. Кроме того, на мобильных устройствах не работает вертикальная и горизонтальная прокрутка.
Я пробовал использовать свойства позиции, максимальную ширину и максимальную высоту, но на мобильных устройствах ничего не работает. Страница ведет себя очень странно на мобильных устройствах.
Не могли бы вы помочь мне это исправить?

Подробнее здесь: https://stackoverflow.com/questions/784 ... responsive