Banner Image Appears Gray on Mobile but Displays Normally on Desktop

[ad_1]

I’m seeing a grey header on desktop: Chrome, Firefox, Floorp.

The root cause is mixed content error from the use of a wildcard SSL certificate that does not cover your domain (aka certificate mismatch error).

The background image is being loaded from an HTTPS URL. But the SSL certificate is from a different domain *.cyber-folks.pl. As a result, the image is blocked.

You see the image on your desktop either because, at some point, you chose to ignore the certificate warning (ie accepted the bad certificate), or your desktop browser simply isn’t enforcing the mixed content policy.

The simple (and long-term) solution is to set up a proper SSL certificate for your domain and change your WordPress site address to use HTTPS. That will also take care of the “Not Secure” warning displayed on your site. Most hosting providers offer free SSL certificates these days (thanks to LetsEncrypt), so I see no reason to NOT do this.

But if you do not want to move your site to HTTPS (yet), a stop-gap solution is to set the URL of the background image to http (currently httpS).

Good luck!

  • This reply was modified 18 minutes ago by George Appiah. Reason: Added a desktop screenshot

 

This site will teach you how to build a WordPress website for beginners. We will cover everything from installing WordPress to adding pages, posts, and images to your site. You will learn how to customize your site with themes and plugins, as well as how to market your site online.

Buy WordPress Transfer