Alvarotrigo.com/fullPage/and bootstrap 3 grid problem

Question

I use alvarotrigo.com/fullPage/ for a good full page effect. In addition, I use bootstrap 3 grid system, which look like this:

<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 a section, and this html creates 3 coluns images, and that’s fine.

But for small viewports, these three columns convert to 3 full-width columns, and this is a problem since the full js page now skips the second and third scroll columns, so if I scroll to #section, I only see the first div, and if I I’ll scroll down, the animation will go to another section, skipping the 2nd and 3rd div.

div 2 and div 3 are grayed out to indicate that these divs will be skipped during the animation.

My question is: can I make settings on fullpage.js or make some settings, so the script will show these divs after scrolling down?

Thanks.

Answer 1

I would advise you to use some responsiveWidth or responsiveHeight options to disable the autoScrolling function on small screen devices.

Therefore, you can have something like this:

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

Online example

Answer 2

scrollOverflow: true helps you scroll in every full section of the page.

check jsfiddle Code for ScrollOverflow

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