How to fix mixed content errors after installing an ssl certificate

Summary

This guide helps you troubleshoot and resolve: How to fix mixed content errors after installing an ssl certificate. Follow the steps below to fix the issue.

Common Causes

Mixed content errors occur when a website loads securely over HTTPS, but certain elements—such as images, scripts, stylesheets, or fonts—are still being requested over an insecure HTTP connection. Modern web browsers block these insecure resources to protect visitors, which can result in broken page layouts, missing images, or security warnings in the address bar. This issue commonly appears shortly after an SSL certificate is installed and HTTPS is enabled.

Remember: If you host with us, you don't need to do this yourself — just Open a Ticket and our Brisbane team will get it sorted.

Quick Fix Steps

1. Identify which resources are loading over HTTP using your browser's developer tools.
2. Update the resource URLs in your website code or content management system from http:// to https://.
3. Use relative URLs where possible so resources load over the same protocol as the page.
4. Clear your website cache and browser cache, then reload the page to verify the errors are resolved.

Detailed Instructions

Identify Mixed Content Errors

1. Open your website in Google Chrome, Microsoft Edge, or Mozilla Firefox.
2. Press F12 or Ctrl + Shift + I (Windows) or Cmd + Option + I (Mac) to open Developer Tools.
3. Click the Console tab. Look for warnings that say Mixed Content: followed by a URL being blocked because it was requested over HTTP.
4. Click the Network tab and reload the page. Filter by img, js, or css to see which assets are loading over http:// instead of https://.

Update Insecure Links in Your Website Code

1. Access your website files via FTP, SFTP, or your hosting control panel's file manager.
2. Open the relevant HTML, PHP, or template files in a text editor.
3. Find any hard-coded URLs beginning with http:// for images, scripts, stylesheets, or iframes.
4. Change them to https://, or better yet, use protocol-relative URLs by removing the scheme entirely—for example, change http://example.com/image.jpg to //example.com/image.jpg.
5. Save the file and upload it back to the server if you edited it locally.

Update Links in a Content Management System

1. Log in to your CMS admin area (for example, WordPress, Joomla, or Drupal).
2. Go to the settings or general configuration section and confirm the Site Address or WordPress Address uses https://.
3. If you use WordPress, install a search-and-replace plugin such as Better Search Replace.
4. Search for your old domain with http:// and replace it with https:// across posts, pages, and widget content.
5. Save your changes and clear any caching plugin you have installed.

Force HTTPS Across Your Entire Site

1. Locate your website's .htaccess file if you are on an Apache server, or your server configuration file if you use Nginx.
2. Add a redirect rule that sends all HTTP traffic to HTTPS.
3. Optionally, enable HTTP Strict Transport Security (HSTS) to tell browsers to always use HTTPS for your domain.
4. Save the file and test your site by visiting http://yourdomain.com.au to confirm it automatically redirects to https://yourdomain.com.au.

Note: Using protocol-relative URLs (starting with //) is often the safest approach because the resource loads over HTTPS when the page is viewed over HTTPS, and over HTTP if the page is ever viewed over HTTP.

Warning: Do not change internal links in your website's database manually using a text editor unless you are certain of the format. Incorrect replacements can break your site. Always take a backup of your files and database before making bulk changes.

Troubleshooting

Errors persist after updating links

Some themes and plugins store absolute URLs in the database. A simple find-and-replace in files may not catch them. Use a database search-and-replace tool designed for your CMS, or check your theme's customiser settings for hard-coded image or logo URLs.

Padlock still shows as "Not Secure" or shows a warning triangle

This usually means one resource is still loading over HTTP. Check the Console tab in Developer Tools for the exact URL, then update it in your website code or CMS.

Content loads fine on desktop but breaks on mobile

Mobile caching or a mobile-specific theme may be serving cached HTTP URLs. Clear your mobile browser cache and any server-side or plugin-based cache, then retest.

Mixed content appears only on certain pages

Those pages may contain embedded content—such as videos, maps, or forms—hosted on an external service that does not support HTTPS. Replace the embed with an HTTPS-enabled version or host the content yourself.

Remember: If you host with us, you don't need to do this yourself — just Open a Ticket and our Brisbane team will get it sorted.

Still Having Issues?