Flexible SSL not showing

I activated Flexible SSL on my website, and made the “Always Use HTTPs” setting in both the SSL/TLS settings and as a page rule.

Now when I go to the website, it first shows me the security padlock but when it is done loading, it says “not secure”. How can I fix this?

I did a WhyNoPadlock scan and that’s what showed:

That’s mixed content that is causing the issue. The Errors section of the screen you shared is showing them. You can view the details using chrome developer tools console view.

Mixed content errors mean that your website is being loaded over HTTPS but some of the resources are being loaded over HTTP. To fix this you will need to edit your source code and change all resources to load over a relative path, or directly over HTTPS.

For example, if you load your images with a full URL:

<img src="http://example.com/image.jpg" />

You would want to change this to:

<img src="//example.com/image.jpg" />

By removing the http:, the browser will use whichever protocol the visitor is already using. An alternative option would be to enable the Automatic HTTPS Rewrites feature that can potentially fix these errors for you automatically. Do be aware that resources loaded by JavaScript or CSS will not be automatically rewritten and mixed content warnings will still appear. (You have a error with JavaScript as shown by the small shield and x asking you to load unsafe scripts)

See this Community Tip for further details