Fullpage.js breaking my Grid 2.0

Hey Everyone, I am running into an issue where when I apply the fullpage id to my fullpage wrapper, everything on the page just loads to the left. It begins to load fine then everything jumps to the left. I can’t seem to figure out why this is happening.

http://punchlistplus-1133328a9e951eec0892297d7.webflow.io/

Read Only Link

Tagging @Alvaro_Trigo - the maker of fullpage.js. He is likely the best resource for this question!

Awesome, thanks so much @mattvaru

1 Like

Can you update to fullPage.js version 3 and let me know if you still have the same issue?
Version 2 of fullPage.js is not maintained anymore and contain some bugs.

1 Like

Ah ok, let me try that. Thanks so much for your quick response @Alvaro_Trigo !

Would I need to just replace the src url to point to version 3? Or is there some changes I need to make to the code as well? Thanks so much

You can take a look at my video tutorial here in case of doubt:

But basically, you can leave it all as it is unless you are using fullPage.js callbacks.
Then you can use the option v2compatible:true.
Bear in mind fullPage.js version 3 doesn’t require jQuery, so if you are not required to use it for any other component, you can now remove it too! :slight_smile:

For more info on fullPage.js, you can take a look at the docs:

2 Likes

I forgot to mention, you an also see and clone my webflow example project here:

You are the man, thanks so much. Its working now :slight_smile:

I’m glad you got it working! :+1:

1 Like

Just one last quick question :slight_smile:

On mobile a lot of the text gets cut off. What would you recommend to disable the fullpage on smaller devices?
https://plp-final.webflow.io/

https://preview.webflow.com/preview/plp-final?utm_source=plp-final&preview=54d22dc4b0216c36292b73fbe3f8cb2f&mode=preview

I would recommend you to take a look at the different responsive options provided on fullPage.js.
Read about the responsiveHeight and responsiveWidth options. And if that’s not what you are looking for, try scrollOverflow. (Although I would go for the first ones)

The example of use of responsiveWidth is included in the video tutorial I posted previously.

1 Like

Hi @Alvaro_Trigo Everything is looking perfect! Let me know what you think

https://punchlistplus.webflow.io/

One final question, When I open the contact menu when I am on a lower section, it returns me to the top. This did not previously occur with the other fullpage.js version. Is there an option to disable? I looked in the documentation but could not find anything.

Thanks again!

Looking good!

One final question, When I open the contact menu when I am on a lower section, it returns me to the top. This did not previously occur with the other fullpage.js version. Is there an option to disable? I looked in the documentation but could not find anything.

I don’t know why is that happening, I suspect the problem is on the webflow side, probably related with the showing of the contact form or its animation.