Problem:
After installing a valid lets encrypt certificate on https://www.personalzone.com I was presented with the following error in my Chrome browser which didn't make much sense given the certificate had just been installed.
Solution
To investigate I went to the developer tools security tab.
First click on settings ( 3 dots in top right of browser ) -> More tools -> Developer tools.
Then click on the security tab of the developer tools console
From here it could be seen that the browser was alerting to active mixed content and the cause was google fonts that were being pulled in via http: instead of https:
Knowing that the css for my Joomla website is included in the template in use I went to the active template and started looking in the css files
CSS files for a template can be found in the Joomla backend at extensions -> templates
and then clicking on the template in the right-hand column of results.
Clicking on the template ( Jsn_mini_pro by Joomlashine in this case ) shows all the files associated with the template.
After a bit of browsing I found the following culprit in the css/styles/news.css file
@import url(http://fonts.googleapis.com/css?family=Sanchez);
To fix the issue this was changed to:
@import url(https://fonts.googleapis.com/css?family=Sanchez);
To ensure that the fonts were requested from Google via a secure connection.
Once this was done the browser was shut down and the personalzone tab was shut down and re-opened and chrome started displaying the site as secure.
Job Done ... another problem solved.