Как заставить div с абсолютным позиционированием исчезнуть с экрана на мобильном телефоне ⇐ CSS

[Anonymous]

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

Вот структура HTML и связанный css.

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

html {
width: 100vw;
overflow: hidden;
}

body {
background-image: url(./images/sand.jpg);
background-size: cover;
background-repeat: no-repeat;
margin: 0;
height: 100%;
overflow: hidden;
}

.holder {
transition: all 1s ease-in-out;
}

.work-holder {
position: absolute;
height: 100%;
width: 96%;
background-color: #fff;
overflow: scroll;
transition: all 1.2s ease-in-out;
right: -100%;
color: #616161;
font-family: 'Arsenal', sans-serif;
line-height: 1.5;
padding-bottom: 65px;
}

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

Вот ссылка на сайт, я не уверен, что мне разрешено это публиковать, но если вы посмотрите на это на мобильном телефоне, вы поймете, о чем я говорю. Это «рабочий» контейнер.
https://linx97.github.io/portfolio/

Подробнее здесь: https://stackoverflow.com/questions/579 ... -on-mobile