# Fix mixed content warnings
Source: https://docs.webgee.com/en/security-ssl/what-are-mixed-content-errors-and-how-do-i-resolve-them



Your site loads over HTTPS but the browser shows **"Not secure"**, a broken
padlock, or images and styling are missing. Applies to any site with an SSL
certificate.

The page is secure; something *on* it is not. Mixed content means an HTTPS page
is loading images, stylesheets or scripts over plain HTTP.

Browsers block scripts and stylesheets outright — which is why a site can look
completely unstyled — and warn about images.

## Find what is causing it [#find-what-is-causing-it]

The browser console names every offending resource.

| Browser       | How                                                                                              |
| ------------- | ------------------------------------------------------------------------------------------------ |
| Chrome / Edge | Right-click → **Inspect** → **Console**                                                          |
| Firefox       | Right-click → **Inspect** → **Console**                                                          |
| Safari        | Enable **Develop** in Advanced preferences, then right-click → **Inspect Element** → **Console** |

Reload the page with the console open. Each warning names a URL beginning
`http://` — that is your list to fix.

## Fix it [#fix-it]

### WordPress [#wordpress]

Usually one setting and one plugin:

1. **Settings → General** — both **WordPress Address** and **Site Address** must
   start with `https://`.
2. Install [Really Simple SSL](https://wordpress.org/plugins/really-simple-ssl/).
   It rewrites `http://` references as pages are served, which handles content,
   themes and most plugins without editing anything.

For a permanent fix, replace the URLs in the database with
[Better Search Replace](https://wordpress.org/plugins/better-search-replace/) —
it handles serialised data correctly, which a plain SQL find-and-replace
corrupts.

### Hand-written sites [#hand-written-sites]

Edit the offending references. Use protocol-relative or absolute HTTPS URLs:

```html
<!-- Wrong -->
<img src="http://example.com/logo.png">

<!-- Right -->
<img src="/logo.png">
<img src="https://example.com/logo.png">
```

Relative paths are best — they work regardless of protocol or domain.

### Resources on a third-party site [#resources-on-a-third-party-site]

If the external site offers HTTPS, change the URL. If it does not, host the file
yourself — there is no way to load it securely otherwise, and browsers will keep
blocking it.

## Check it worked [#check-it-worked]

Reload with the console open. No warnings means it is fixed, and the padlock
returns.

Test in a private window — a cached copy of the page can keep showing the old
behaviour.

## If the padlock is still missing [#if-the-padlock-is-still-missing]

* **The certificate itself is the problem**, not mixed content. See
  [Install a free SSL certificate](/en/security-ssl/free-ssl-certificate).
* **A cache is serving the old page.** Clear your caching plugin, and purge
  Cloudflare if you use it.
* **A resource loads only on some pages.** Check a few, not just the homepage.

## Related [#related]

* [Force HTTPS on your site](/en/security-ssl/force-https)
* [Install a free SSL certificate](/en/security-ssl/free-ssl-certificate)