Help! HTTPS isn't working

Please let us know if you have any additional questions not covered in this article or if any of the information is unclear.

A green lock symbol to the left of the website address in the browser's address bar indicates your website connection is secure. This is what you want to see:

If, in place of the secure 'lock,' you see something else, your connection is not completely secure.

The Chrome browser displays an "insecure" page like this:

Firefox is a little more direct -- the lock has a warning superimposed, like this:

Typically, these symbols indicate that you have "mixed content." That is, some elements on the page are not served from the secure server. Two very common items where "insecure" content sneaks in are CSS files imported into the page and images that point to "http://" rather than "https://"

For example, you might see something ike this in your code:

	<img src=”http://mysite.com/image.png”>

You can avoid a mixed content warning by changing "http" in the example above to "https." You may also use a protocol relative URL by leaving out "http" or "https" entirely. A relative URL would look like this:

	<img src=”//mysite.com/image.png”>

Once you find and fix all references to "http://" in your code, the mixed content warning will magically disappear.

Next project: turbo-charge your HTTPS with CloudFlare and HSTS.