CODEWITHSUNDEEP
fullpage.js
curious1
curious1

Reputation: 14717

How to "disable" FullPage on smartphones and display sections as a long page?

I am using FullPage JS to display a few sections. On the desktop, it works perfectly.

However, Some sections have quite an amount of content. On smartphones, part of the content of these sections is covered. Put another way, I am only able to see part of the content of these sections when I scroll (I already used media queries to reduce content display on smartphones, but these sections do have more content than what a full screen can display on smartphones).

I need the usual FullPage JS to work for me on the desktop. However, can I disable full screen display on smartphones and simply display a list of sections as a long page on smartphones? Did anyone do this before?

Upvotes: 1

Views: 2544

Answers (1)

Alvaro
Alvaro

Reputation: 41595

fullpage.js provides options for it such as responsiveWidth and responsiveHeight that will turn off auto scrolling under a given value in px.

Combine those with the class fp-auto-height-responsive and you'll get what you want.

All of this is detailed in the docs.

Responsive auto height sections A responsive auto height can be applied by using the class fp-auto-height-responsive. This way sections will be full height until the responsive mode gets fired.

responsiveWidth: (default 0) A normal scroll (autoScrolling:false) will be used under the defined width in pixels. A class fp-responsive is added to the body tag in case the user wants to use it for his own responsive CSS. For example, if set to 900, whenever the browser's width is less than 900 the plugin will scroll like a normal site.

responsiveHeight: (default 0) A normal scroll (autoScrolling:false) will be used under the defined height in pixels. A class fp-responsive is added to the body tag in case the user wants to use it for his own responsive CSS. For example, if set to 900, whenever the browser's height is less than 900 the plugin will scroll like a normal site.

Upvotes: 2

Related Questions