WordPress site displays darker and messed up on mobile

  • Unknown's avatar
    olanschuh · Member ·

    Hello! I could use some guidance as my website is appearing differently, some elements are appearing much darker on mobile- I may have dark mode enabled on my phone but on my laptop it looks just fine and some other peoples phones. I’m using the theme hello elementor which might have been a mistake because I dislike elementor and don’t use it at all, but when i try to switch themes it seems everything will get messed up? any ideas on that? I can’t seem to find any dark mode settings in the theme. Thanks for any help!

    https://drive.google.com/file/d/1Gk1y_wwx67_vZUF2XsUVfP0iXtEqUWrD/view?usp=drive_link

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    jessicaandrews257 · Member ·

    1. Check If Dark Mode Is Enabled on Your Phone

    • If dark mode is enabled on your phone, some browsers (like Chrome and Safari) force dark mode on websites.
    • To test, turn off dark mode on your phone:
      • iPhone: Settings → Display & Brightness → Set to Light Mode.
      • Android: Settings → Display → Disable Dark Mode.

    If the site looks normal after turning off dark mode, the issue is browser-based.2. Check if the Browser Is Forcing Dark Mode

    Some browsers automatically invert colors for websites that don’t support dark mode properly.

    • Google Chrome (Android & iOS):
      • Type chrome://flags in the browser address bar.
      • Search for “Force Dark Mode for Web Contents.”
      • If it’s enabled, set it to Disabled.
    • Safari (iOS):
      • Go to Settings → Safari → Turn off Website Tinting.

    3. Disable Dark Mode with CSS

    If your theme or browser is auto-applying dark mode, you can override it with CSS:

    1. Add this CSS to your site:
      • In WordPress, go to Appearance → Customize → Additional CSS and paste:
      cssCopyEdit@media (prefers-color-scheme: dark) { body { background-color: #fff !important; color: #000 !important; } img, video { filter: none !important; } }
    2. Save & Publish, then refresh your site on mobile.

    4. Using “Hello Elementor” Without Elementor?

    If you don’t use Elementor but have the Hello Elementor theme, it could be a problem because it’s designed for Elementor use.

    Switching Themes Without Breaking the Site:

    • If you want to change themes without losing your site design:
      • Use GeneratePress or Astra (lightweight themes).
      • Install a child theme to avoid resetting settings.
      • Backup your site before switching using a plugin like UpdraftPlus.

    5. Check for Theme or Plugin Conflicts

    • If switching themes breaks your design, it may be due to:
      • Custom CSS that is theme-dependent.
      • Plugins modifying theme styles.
      • Elementor-specific elements that rely on the theme.

    Try This:

    • Install the Health Check & Troubleshooting plugin.
    • Enable Troubleshooting Mode to test theme changes without affecting visitors.

    Final Steps

    ✅ Check dark mode settings on your phone & browser.
    ✅ Add CSS fixes to override dark mode.
    ✅ If switching themes, backup first and test a new theme in troubleshooting mode.

  • Unknown's avatar
    tusharkapoorflymediatechnology · Member ·

    It appears your dark mode phone setting is also impacting the display. You can try applying custom CSS to hard-code light mode on mobile devices or try swapping a theme via a staging website to prevent your existing design from being ruined. A child theme may be necessary to switch out of Elementor to maintain personalizations. Just let me know if you’re in need of further assistance!

  • The topic ‘WordPress site displays darker and messed up on mobile’ is closed to new replies.