How can I fix the issue of the Finsweet Cookie consent cloneable not working on mobile and unable to scroll inside the modal on both Finsweet's website and my own Webflow site?

TL;DR

Inspect modal, container, and body elements for overflow: hidden or fixed positioning that blocks scrolling.
Add custom CSS to allow scrolling on .fs-cc-modal and re-enable body/html scroll when open.
Optionally, use JavaScript to override any scroll lock applied via JS if CSS alone doesn't resolve it.
Republish and test on real mobile devices to confirm functionality.

The Finsweet Cookie Consent modal is not scrollable on mobile, making it unusable for users who can’t access the full interface. This is a known issue with the modal’s overflow and scrolling behavior on smaller viewports.

1. Identify the Cause

The issue typically stems from preventScroll logic or CSS overflow settings that block scrolling while the modal is open.
The modal may be set to fixed positioning, and the body or html tag may have overflow: hidden, preventing page or modal scrolling.

2. Inspect the Affected Elements

Open your site in Webflow's Designer → Preview mode, or inspect it directly in the browser DevTools.
Check the .fs-cc-modal, .fs-cc-container, and body elements.
When the modal is open, verify whether overflow on container elements or body is set to hidden.

3. Add Custom CSS to Fix Scrolling

You can inject a small custom CSS snippet via Page Settings → Custom Code → Inside <head> or in Site Settings:

Use this to allow the modal to scroll vertically on mobile:

<style>
  .fs-cc-modal {
    max-height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* for iOS smooth scrolling */
  }

  html.fs-cc-modal-open,
  body.fs-cc-modal-open {
    overflow: auto !important; /* Restore scroll when modal is shown */
    position: static !important;
  }
</style>

Replace .fs-cc-modal-open class if your setup uses a different class name when the modal is triggered.

4. Bypass Scroll Lock in JavaScript (Optional)

If Finsweet’s library uses JS to prevent scrolling (e.g., adding overflow:hidden on <body> when modal opens), you may need to override this via code:

Add this to Page Settings → Footer custom code:

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const observer = new MutationObserver(() => {
      document.body.style.overflow = 'auto';
    });

    observer.observe(document.body, { attributes: true, attributeFilter: ['style', 'class'] });
  });
</script>

This resets the body's overflow if modified. Use with caution—only if CSS changes are insufficient.

5. Re-publish and Test on Mobile

Publish your site and test on actual mobile devices using Safari and Chrome.
If still not scrollable, verify that your modal content area doesn’t have hardcoded height or overflow: hidden.

Summary

To fix the Finsweet Cookie Consent modal’s mobile scroll issue, add CSS to enable overflow on the modal, restore scrolling on body/html, and use JavaScript if needed to override scroll locking behaviors. Test after publishing to confirm the fix.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer