Jquery 响应视差jumbotron不处理媒体查询

我正在使用

.bg

类，再加上一些jquery，在

jumbotron

上创建视差滚动效果。它在较大的屏幕上按计划工作，但是对于较小的设备，高度不可调整。我已输入以下媒体查询，以便在具有

最大宽度：768px

的设备上将

.bg

调整为

高度：350px

。但是，在执行此操作时，

.bg

元素将固定在页面上，以便所有其他内容在滚动时覆盖该页面，并且视差效果将丢失

我已经研究过了，但没有找到类似的查询，所以如果有任何反馈，我将不胜感激

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>

非常感谢

---

Jon

查看您的站点，有三个属性设置高度。在媒体查询中，您需要包括

.bg

、

#jumbotron\u关于
和
.jumbotron
的高度

最重要的是，
#jumbotron_about
并不像上面的例子那样出现在网站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;
}
}

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