Search code examples
cssfullpage.js

All fullpage.js sections display at the same time on first load

To get straight to the point my issue is all sections briefly displaying at the same time stacked together upon initial loading.

I found the exact same issue asked by someone else on github and tried setting the height of all sections to 100% in css like so: .fp-section {height: 100%!important;} but it didn't work. (Correct me if I did it wrong.)

Then I finally found a solution that worked which was by hiding the body until the fullpage.js is fully loaded like so: 

body {display:none}
body[class*="fp-viewing-"] {display:block}

Everything works fine with this solution EXCEPT for the responsive div that's supposed to show at certain screen width.

To clarify, my html structure consists of <div id="fullpage"> and <div id="responsive"> under body, fullpage div showing by default and responsive div set as display: none under media query and only showing at certain screen width.

What else can I do to stop all sections displaying the same time on first load?

Solution

  • Regarding the issue with the sections, check my answer here.

    Basically:

    Assuming #fullpage is your fullpage wrapper and that you use the default selectors for sections and slides:

    html,
body,
#fullpage,
.section,
.slide,
.fp-tableCell,
{
    height: 100%
}