Как сделать Reveal height меньше, чем область просмотра на мобильном телефоне? - PullRequest
Новая
       18

Как сделать Reveal height меньше, чем область просмотра на мобильном телефоне?

2 голосов
/ 05 апреля 2019

Я работаю над адаптивным сайтом, у которого есть модальное средство Foundation Reveal при загрузке страницы.Я знаю, что по умолчанию для Reveal на малых экранах используется весь экран, но мне нужно уменьшить его, чтобы пользователь мог видеть, что за ним стоит веб-сайт.

Я смог привести стороны внутрь и надавить сверху вниз.Независимо от того, что я делаю, чтобы попытаться отрегулировать высоту или поднять дно, модал всегда больше, чем область просмотра на мобильном телефоне.Я не смог найти никакого решения этой проблемы.

Я пытался использовать жесткие пиксели и проценты для высоты, минимальной высоты, максимальной высоты и использовать отступы наложенного наложения безуспешно.

Вот CSS, который я использовал для приведения вершины и сторон: 

@media screen and (max-width: 39.9375em) {
    .reveal {
        width: 80%;
        margin: auto;
        top: 10%;
    }
}

В идеале, между верхней и верхней частью модальной части и нижней частью должно быть около 10%.модальные к верху и низу области просмотра соответственно.

1 Ответ

0 голосов
/ 05 апреля 2019

Вершина смещения установлена ​​с JS как стиль на модале.Для переопределения в CSS вам понадобятся! Важные и vh единицы, потому что% не относится ни к чему. 

.reveal {
    width: 80%;
    margin: 0 auto;
    top: 15vh !important;
}

https://codepen.io/rafibomb/pen/eozgPV?editors=1100

Или изменить в JS

на .reveal добавьте data-v-offset="150"

data-v-offset -> число или строку
Расстояние в пикселях, которое модал должен нажать вниз от верхней части экрана.

ДляЦентрируя мод по вертикали, вы можете использовать трюк с абсолютным центром: 

top: 50vh !important;
transform: translateY(-50%);

Вы также можете переопределить высоту 100vh по умолчанию следующим образом: 

min-height: 85vh;
height: 85vh !important;

Пример: https://codepen.io/rafibomb/pen/dLpbwZ?editors=1100

...