0

I am trying to have my navigation bar shift with the picture slider that it is located underneath when I shrink the width of the screen, but unfortunately the navigation is not moving with the rest of the content above it. Here's the link to the site...http://collegefundingremedies.herokuapp.com/

Here's the 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>

And here's the 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%;
    }
}   
}

Please help me make this part responsive! Or maybe provide any suggestions on what else I can do to make it look better. Thanks!

Kandianne Pierre
  • 314
  • 1
  • 5
  • 17

1 Answers1

1

remove height /* Line 147 style.css*/ 

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

Put height auto; /* Line 160 style.css*/

#mainPic .fotorama{height: auto;}

it is working.

Head In Cloud
  • 2,001
  • 1
  • 8
  • 10