Question

当我缩小屏幕宽度时，我试图让我的导航栏移动它位于下面的图片滑块，但遗憾的是导航不会随着其上方的其余内容移动。这是该网站的链接...... 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;}

它正在运作。

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

1 个答案: