Отзывчивый jumbotron параллакса не работает с медиа-запросами

Я использую класс .bg в сочетании с некоторым jquery для создания эффекта прокрутки параллакса на jumbotron. Он работает, как и планировалось, на больших экранах, однако высота не регулируется для устройств меньшего размера. Я вставил следующий медиа-запрос, чтобы изменить размер .bg на height: 350px на устройствах с max-width: 768px. Однако при этом элемент .bg фиксируется на странице, так что все остальное содержимое перекрывает его при прокрутке, и эффект параллакса теряется.

Я исследовал SO и не смог найти аналогичный запрос, поэтому, если есть какие-либо отзывы, мы будем очень признательны.

HTML: -

    <div class="bg"></div>
    <div class="jumbotron" id="jumbotron_about">
        <div class="container">
            <h1>A brief<br>
            history of me</h1>
            <h5>Read on and learn</h5>
        </div>
    </div>

CSS:

@media (max-width: 768px) {
.bg {
background-size: cover!important;
position: fixed;
width: 100%;
height: 350px!important;
top:0;
left:0;
z-index: -1;
}

#jumbotron_about {
height: 350px!important;
background:transparent;
}
}

Вот ссылка на мою веб-страницу

Большое спасибо Джон


html jquery css parallax
person Jonnyboy    schedule 18.12.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Глядя на ваш сайт, есть три свойства, устанавливающие высоту. В вашем медиа-запросе вам нужно указать высоту для .bg, #jumbotron_about и .jumbotron.

Самое главное, что #jumbotron_about не находится в вашем медиа-запросе в CSS ваших сайтов, как в вашем примере выше, в котором, я думаю, и заключается проблема.

So

@media (max-width: 768px) {    
.jumbotron, #jumbotron_about, .bg {
    height: 380px;
  }
...
}
person Ste Pammenter    schedule 18.12.2015