Back to Community

Troubleshooting Common CookieYes Mobile Display and Functionality Issues

Content

If your CookieYes cookie consent banner works perfectly on desktop but acts strangely on mobile devices, you're not alone. This is a common category of issues reported by users. This guide will walk you through the most frequent causes and their solutions, helping you get your mobile cookie banner back on track.

Why Do These Mobile Issues Happen?

Mobile browsers handle cookies, CSS, and JavaScript differently than their desktop counterparts. Common culprits include browser-specific quirks, aggressive caching, conflicts with other plugins or themes, and CSS that isn't fully responsive. The symptoms can range from the banner not appearing at all to it being unclickable or incorrectly positioned.

Common Mobile Problems and Their Solutions

1. Banner Not Appearing on Mobile

Symptoms: The banner is visible on desktop but completely absent on mobile browsers.

Likely Causes & Fixes:

  • Caching/Optimization Plugins: These plugins can sometimes delay or optimize our JavaScript files too aggressively, preventing them from running on mobile. Solution: Exclude CookieYes scripts from JavaScript optimization or deferment in your caching plugin's settings.
  • Browser Cache: A stale version of the site might be stored on the mobile device. Solution: Clear your mobile browser's cache and cookies, or try viewing the site in an incognito/private window.

2. Banner is Visible but Unclickable or Overlaying Content

Symptoms: The banner appears, but users cannot click the "Accept" button or other links. After accepting, a transparent overlay might block interaction with the site.

Likely Causes & Fixes:

  • CSS Conflicts: Custom CSS from your theme or other plugins can interfere with the banner's positioning and functionality. Solution: Review any custom CSS rules that target the banner's container (e.g., #cookie-law-info-bar) and disable them to test.
  • Plugin Conflicts: Mobile-specific plugins (like WPTouch) can cause conflicts. Solution: Temporarily disable other plugins to identify the conflict, then seek configuration guidance from the other plugin's support.
  • Missing Connection: One user found their overlay issue was resolved after properly connecting their plugin to the CookieYes web app.

3. Banner Reappears on Every Page Load

Symptoms: A user accepts the banner, but it reappears on the next page or refresh.

Likely Causes & Fixes:

  • Browser Cookie Settings: Some mobile browsers, especially Safari, block third-party cookies by default. Solution: Ensure the user's browser is set to allow cookies. This is often a user-side setting, but it's good to be aware of it.
  • Ad Blockers: Browser extensions can prevent the consent cookie from being set. Solution: Advise users to try disabling ad blockers for your site.

4. Layout and Display Problems on Mobile

Symptoms: Text is truncated, the banner is off-screen, or elements are jumbled on small screens.

Likely Causes & Fixes:

  • CSS Viewport Units: The use of 100vh (100% of the viewport height) can cause issues on mobile browsers where the address bar isn't accounted for. Solution: Apply custom CSS to override default styles. For example, to fix a truncated preference center, you could use:
    @media (max-width: 576px) {
      .cky-preference-center {
        max-height: calc(100vh - 90px) !important;
      }
    }
  • Theme Conflicts: Your theme's CSS might be adding conflicting margins or padding. Solution: Use your browser's inspector tool on mobile view to identify and override conflicting styles with custom CSS.

General Troubleshooting Steps

  1. Test in Incognito Mode: Always first test the issue in a private/incognito browser window on your mobile device. This rules out browser cache issues.
  2. Clear All Caches: Clear your WordPress cache (if using a caching plugin), your CDN cache (if applicable), and your mobile browser cache.
  3. Conflict Test: Temporarily switch to a default WordPress theme (like Twenty Twenty-Four) and disable all other plugins except CookieYes. If the problem disappears, reactivate them one-by-one to find the culprit.
  4. Check Browser Settings: Verify that cookies are not being blocked by the mobile browser itself.

By methodically working through these common issues, most mobile-related problems with the CookieYes banner can be identified and resolved. If problems persist after trying these steps, it can be helpful to seek advice in community forums, providing specific details about your theme, other active plugins, and the exact symptoms you're seeing.

Related Support Threads Support