How to Fix Mixed Content Error on Chrome? (So it shows “Secure”)

Situation:

This is after you turn SSL on for your website. And your browser address is already showing https://
But for some reason, Chrome is not showing a secure padlock on the address bar. It is showing red, warning.
Do the following to find out why

On Chrome, press Control+Shift+J to open the DevTools.
In the Console tab, you will see a message higlighted in red that says “Mixed Content: The page at ‘https://[DOMAIN]/’ was loaded over HTTPS, but requested an insecure stylesheet ‘http://[DOMAIN]/[FILE PATH/FILE]’. This request has been blocked; the content must be served over HTTPS.”
This tells you exactly what file is being loaded over HTTP. So you just need to change each one to HTTPS
There are mostly 3 possibilities of where each file is located (most common for a wordpress website)
1. It is in the HTML file you are on
2. It is loaded from a stylesheeet requesting an image over HTTP
3. Hardest one to fix: Loaded by javascript (ouch!)

On the bottom section, you will hopefully see a panel like this one. Click “Search” and type in the file name (or part of the file name) in the text box then press enter.
You will see a list of results of where the file is being called from.
In here it says (index) which means the page (HTML file) which is open in the window.
1. If it is loaded from a css file, it would say something like [filename].css, etc. -> Easy. Just edit the css file.
2. If it is loaded from a JS file, it would say something like [filename].js etc -> THis one’s tough. You need to know some JS to debug this
For HTML file – in wordpress, try:
1. Install really simple SSL or similar “forced SSL” plugin
2. If that doesn’t work, the path may be hard coded. Do a text search of the PHP code inside the website.
3. This covers 90% of the cases. The last 10%, sorry you will need a coder.

Try website in this tool: https://www.whynopadlock.com/

It will give you better hints of why website is not green padlock SSH on Chrome.