alvarotrigo.com/fullPage/ and bootstrap 3 grid issue

Question

I'm using alvarotrigo.com/fullPage/ for nice fullpage effect. Also i am using bootstrap 3 grid system, which look like:

<section id="section" class="section">
  <div class="home">
      <div class="container-fluid position-relative">
          <div class="row">
              <div class="col-sm-4">
              </div>
              <div class="col-sm-4">
              </div>
              <div class="col-sm-4">
              </div>
          </div>
      </div>
  </div>

Now, we see 3 columns, all closed in section, and this html creates 3 coluns view, and it's ok.

But for smaller viewports, this three columns, transform into 3 full width columns, and this is problem, as fullpage,js now skip second and third column on scroll, so if i scroll to #section, i see only first div, and if i scroll down, animation will go to another section, skipping 2 and 3 div. I created simple illustration .

div 2 and div 3 are grayed to show, that those divs will be skipped during animation.

My question is, can i do setups on fullpage.js or do some tweaks, so script will show those divs, after scroll down ?

Thanks.

Answer 1

I would encourage you to use some responsiveWidth or responsiveHeight options to turn off the autoScrolling feature on small screen devices.

Therefore, you can have something like this:

$('#fullpage').fullpage({
    responsiveWidth: 758
});

Example online

Answer 2

scrollOverflow: true will help you scroll within each full page section.

check jsfiddle Code for ScrollOverflow

$('#fullpage').fullpage({
              sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
              scrollOverflow: true
});