响应式导航栏不随滑块缩小

Question

当我缩小屏幕宽度时，我试图让我的导航栏随着它位于下方的图片滑块移动，但不幸的是，导航栏并没有随着它上方的其余内容移动。这是网站的 link...http://collegefundingremedies.herokuapp.com/

这是 html...

<div class="md-tall md-primary md-hue-1" id="mainPic">
            <img class="logo" src="../images/logo_large_no_back_white.png" alt="College Funding Remedies Logo" />

        <div class="fotorama" data-autoplay="true" data-loop-"true" data-nav="false"  data-arrows="false">
            <img src="../images/book-onchalkboard.jpg" alt="College Funding Book" />
            <img src="../images/book-onchalkboard.jpg" alt="College Funding Book" />
            <img src="../images/students_webinar_cfr.jpg" alt="College Funding Book" />
        </div>
</div>

这里是 SCSS (CSS)...

#mainPic {
height: 30%;
width: 100%;
.logo {
    position:absolute;
    margin:0;
    margin-top: 3%;
    z-index: 1;
    width: 16%;
}
.fotorama {
    margin:0 auto;
    height: 100%;
    padding: 0;
    img {
        margin: 0;
        width:100%;
        height: 100%;
    }
}   
}

请帮助我使这部分响应！或者也许就我还能做些什么来让它看起来更好提供任何建议。谢谢！

Answer 1

删除高度/*第147行style.css*/

#mainPic{height:30%;} /* remove height */

自动放置高度； /* 第 160 行 style.css*/

#mainPic .fotorama{height: auto;}

正在运行。

响应式导航栏不随滑块缩小

Responsive navigation bar not shrinking with slider

css

navigationbar

responsive-design

responsiveness

responsive-images