This is a common type of error. Even I faced this issue while setting up HTTPS on this blog using Cloudflare. On checking the Developer Tools console in Google Chrome, I found out that few Javascript files were getting sent over HTTP. That was causing the HTTP/HTTPS mixed content error & messing with the blog layout by blocking some content. The error log looked like below:
Mixed Content: The page at ‘http://34.145.53.56/wp-admin/widgets.php’ was loaded over HTTPS, but requested an insecure script ‘http://34.145.53.56/wp-includes/js/wp-emoji-release.min.js?ver=5.8.1’. This request has been blocked; the content must be served over HTTPS.
To fix this, I had to make a small adjustment in WordPress wp-config.php file & add $_SERVER[‘HTTPS’]=’on’; line as below. And that solved the problem. All the files started getting served over HTTPS.
define( 'WP_DEBUG', false );
$_SERVER['HTTPS']='on';
/* That's all, stop editing! Happy publishing. */