Content after flexslider does not move up when the slider resizes to smaller height

Question

Uploaded page if you want to see the issue: http://thebrunogomes.com

My issue is when the flexslider resizes according to the browser scale, the content right after does not move up with it. So on screens with small width (mobile, tablet), I end up with a big gap between the slider and the next part of the content. How would I go about fixing this? I tried changing some CSS around without much success.

Please let me know if you guys would need any extra information.

<div id="content-sections">
<section id="home">
    <!-- flexslider images -->
    <div id="slider" class="flexslider">
      <ul class="slides">
        <li>
            <img src="demo/images/tumblr_static_banner1.jpg" alt="tiesto event 1"/>
            </li>
            <li>
            <img src="demo/images/tumblr_static_banner2.jpg" alt="tiesto event 2"/>
            </li>
            <li>
            <img src="demo/images/tumblr_static_banner3.jpg" alt="tiesto event 3"/>
            </li>
            <li>
            <img src="demo/images/tumblr_static_banner4.jpg" alt="tiesto event 4"/>
            </li>
        <li>
            <img src="demo/images/tumblr_static_banner5.jpg" alt="tiesto event 5"/>
            </li>
            <li>
            <img src="demo/images/tumblr_static_banner6.jpg" alt="tiesto event 6"/>
            </li>
            <li>
            <img src="demo/images/tumblr_static_banner7.jpg" alt="tiesto event 7"/>
            </li>
            <li>
            <img src="demo/images/tumblr_static_banner8.jpg" alt="tiesto event 8" />
            </li>

      </ul>
    </div>
    <div id="carousel" class="flexslider">
 <ul class="slides">
 <li>
  <img src="demo/images/tumblr_static_banner1.jpg" alt="tiesto event 1"/>
 </li>
 <li>
 <img src="demo/images/tumblr_static_banner2.jpg" alt="tiesto event 2"/>
 </li>
 <li>
  <img src="demo/images/tumblr_static_banner3.jpg" alt="tiesto event 3"/>
 </li>
 <li>
  <img src="demo/images/tumblr_static_banner4.jpg" alt="tiesto event 4"/>
 </li>
 <li>
  <img src="demo/images/tumblr_static_banner5.jpg" alt="tiesto event 5"/>
 </li>
 <li>
 <img src="demo/images/tumblr_static_banner6.jpg" alt="tiesto event 6"/>
 </li>
 <li>
  <img src="demo/images/tumblr_static_banner7.jpg" alt="tiesto event 7"/>
 </li>
 <li>
  <img src="demo/images/tumblr_static_banner8.jpg" alt="tiesto event 8"/>
 </li>
 </ul>
 </div>
</section> <!-- end #home -->

<section id="tour">
 <div class="container_12 clearfix">
  <div class="grid_12">
    <h2>Tour Dates</h2>
   </div> <!-- end grid_12 -->
  </div> <!-- end container_12 -->
 <div id="tour-wrapper"></div>
</section> <!-- end #tour -->

Is it possible that my navigation script is the cause?

$(document).ready(function() {
var pageHeight = $(window).height();
$('#content-sections section').css('min-height', pageHeight + 'px');
// adjust last section. 340 = 250px section padding + 40px for footer
$('#content-sections section:last-child').css('min-height', pageHeight - 290 + 'px');
$('nav ul li a').click(function(){
    var el = $(this).attr('href');
    var elWrapper = $(el);
    scrollToDiv(elWrapper);
    return false;
});

Answer 1

While leveraging jQuery plugins can dramatically speed up development time, there are sometimes unexpected side-effects. In this case, the one.page.nav.js plugin adds a min-height equal to the browser window's current height at launch. This is intended to help keep footer material at the bottom of the window, but it causes strange resize behavior, and probably isn't ideal for mobile devices, either.

This line in particular is the culprit (from one.page.nav):

$(document).ready(function() {
    var pageHeight = $(window).height();
    $('#content-sections section').css('min-height', pageHeight + 'px'); // No!

Since you've copied this code to your local server, you could just edit it, but in case you ever wanted to load from a CDN (or use a front-end build mechanism, etc.), it's best to add this line of code to your $(document).ready handler:

$("#home").css("min-height", 0);

You can review the troubleshooting approach used to identify and solve this problem on this fiddle with its four separate revisions.