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

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

Сообщение 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
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»