How can I disable fullPage.js on mobile view in Webflow? I have tried setting related Div Blocks to "Hide on Phone Portrait" but it doesn't seem to work. Is there a way to add a few lines of JavaScript code to achieve this?
TL;DR
- Add custom JavaScript in the page settings to disable fullPage.js if viewport width is less than 768 pixels.
- Save, publish, and test the project on mobile devices to ensure fullPage.js is disabled.
To disable fullPage.js on mobile view in Webflow, you can add custom JavaScript to your project. This script will check the viewport width and disable fullPage.js when the device width is less than a specified threshold, such as 768 pixels for mobile devices.
1. Add Custom JavaScript
- Open the Page Settings where fullPage.js is enabled.
- Scroll down to the Custom Code section for Before </body> tag.
- Add the following JavaScript code:
<script>
let isFullPageEnabled = true;
const disableFullPage = () => {
if (window.innerWidth < 768 && isFullPageEnabled) {
fullpage_api.destroy('all');
isFullPageEnabled = false;
} else if (window.innerWidth >= 768 && !isFullPageEnabled) {
// Optional: Re-initialize fullPage.js if desired on larger screens
}
};
// Disable fullPage.js on initial load
disableFullPage();
// Add event listener to handle window resizing
window.addEventListener('resize', disableFullPage);
</script>
2. Save and Test
- Publish the project to apply the changes.
- Test on Mobile Devices to ensure fullPage.js is disabled when the viewport width is under 768 pixels.
Summary
To disable fullPage.js on mobile views in Webflow, add a JavaScript script to your project that checks the viewport width and destroys the fullPage.js instance if the device is mobile-sized. This approach effectively prevents fullPage.js from running on smaller screens.
