CODEWITHSUNDEEP
javascriptjquerycssfullpage.js
Sekoul
Sekoul

Reputation: 1371

fullpage.js - setting responsiveWidth and scrollOverflow breaks page on mobile

CONTEXT

I am using fullpage.js on a page and would like to disable it on mobile, as some sections do not fit within a single screen on mobile devices (they are just cut off). I've found that setting responsiveWidth: 1000 and scrollOverflow: true has the intended effect.

Problem

However, setting these options also seems to move the entire page up by a screen and a half - i.e. the top 1.5 screens worth of content is invisible, and the page only starts near the middle of section 2. Has anyone experienced this bug before?

Any particular reason I might be seeing this?

Upvotes: 3

Views: 2641

Answers (1)

Alvaro
Alvaro

Reputation: 41595

You don't need to use scrollOverflow, in fact, I always suggest people not to use it. That's not a real responsive site!

You can use the responsiveWidth and responsiveHeight options and then force the section to be as big as you want by doing this:

.fp-responsive .fp-section,
.fp-responsive .fp-slide,
.fp-responsive .fp-tableCell{
    height: auto !important;
}

I used the class .fp-responsive which is one of the state classes added to the body by fullpage.js. It will be added when the plugin fires the responsive mode and it provides a way to create conditional CSS styles.

Upvotes: 2

Related Questions