Website look and style changed after enabling Cloudflare's NS (Due to SSL?)

ssl

#1

I have a personal WP website which I just created. Wanted to get a free SSL for https. Got the NS on my existing DNS provider replaced with CloudFlare’s NS. Both the website and SSL certificate status is “Active” in CloudFlare’s console and here is my problem (Screenshots attached)
Before CloudFlare, my website used to look like Before_CF.jpeg and after I activated the website under CloudFlare, though it can be accessed using https, however the website looks like

.jpeg (Without any CSS I guess).

Please assist.


#2

The status column is your friend :wink:


#3

I am sorry @sandro , I did not get your point… Could you be a little more elaborate?


#4

Check out what it says in the status column of your screenshot. That should give you the right hint to fix that issue.


#5

@sandro: Got it. Thanks. Here we have it documented as well, my miss - https://support.cloudflare.com/hc/en-us/articles/204151588-Why-are-my-images-css-js-files-missing-when-I-load-my-page-over-HTTPS- however, I am still struggling to get this fixed. I have already tried these options https://wordpress.stackexchange.com/a/108212 . Any WordPress plugin you know of?


#6

Your website loads without problem. If the problem exists yet, try clearing your browser cache.


#7

I had to install a wordpress plugin which will force the use of relative protocol. The home page looks good and the plugin seemed to work fine until then. But when I browse any other page, again the CSSs are not loading. I thought the plugin will take care of everything but I was wrong.
Now, I am not even able to login to WP-admin.
Any guesses?