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?

When using fullPage.js in Webflow, there might be a need to disable it on mobile devices. Simply hiding Div Blocks may not work due to its JavaScript behavior. Here's how you can use JavaScript to disable fullPage.js on smaller screens:

​

1. Determine the Screen Width for Disabling fullPage.js

• Choose a breakpoint where you want to disable fullPage.js. Commonly, this is at 768px or below, which is typical for phones.

​

2. Implement Custom JavaScript

• Go to your Webflow Dashboard and navigate to the Project Settings.
• Select the Custom Code tab.
• Scroll to the Before </body> tag section.

​

3. Add the JavaScript Code

• Use the following code snippet to disable fullPage.js on mobile:

​

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var widthThreshold = 768; // Define your desired breakpoint
    if (window.innerWidth <= widthThreshold) {
      if (typeof $.fn.fullpage.destroy === 'function') {
        $.fn.fullpage.destroy('all'); // Destroy fullPage.js
      }
    } else {
      $('#fullpage').fullpage(); // Initialize fullPage.js for larger screens
    }
  });
</script>

​

• Explanation: 
• This script checks the screen width and, if it is less than or equal to 768px, it destroys the fullPage.js instance.
• If the screen is wider than 768px, it initializes (or reinitializes) fullPage.js.

​

4. Save and Publish

• Save the changes in Project Settings.
• Publish your site to apply the changes.

​

Summary

To disable fullPage.js on mobile devices in Webflow, implement a script that checks the screen size and calls the .destroy('all') method for smaller screens. Ensure this script is added to the Before </body> tag section and adjust the breakpoint as needed.