Cloudflare Design Messes Up

Good day everyone!

I’m having problems with cloudflare. When I run directly without proxy it looks good both in mobile and desktop. But when I proxy it with CF it messes up my design. Any ideas? I’ve tried bypass the cache but still giving me this look on desktop.

Here are my page rule settings:

When I enabled development mode it’s functioning properly but dev mode is turned off every 3 hrs. I badly need help.

Thank you.

It currently is proxied and looks fine, does it not?

Just a polite hint :slight_smile: the block you impose on the developer tools is a bit pointless :slight_smile:

2 Likes

Thank you for the tip. There are times that this happens and are not. I really don’t know what triggers it. It just happens when I run with cloudflare proxy.

You said it even happens when you have the shown page rule in place. In that case it should not be caching related (assuming you purged the cache) and so it really could only be from your server.

Maybe a CSS file is missing. Without being able to reproduce it, it is difficult to suggest anything else I am afraid. Your encryption mode is Full strict and all your links are on HTTPS, right?

2 Likes

Plus, with a narrower viewport

1 Like

Yes I’ve set it to Full mode (strict). Also using Let’s Encrypt SSL on my server end. I’ll check on my server part for it. Maybe the problem’s there. Thank you so much.

PS: Yes I’ve purged everything.

1 Like

Then just check if everything is always on HTTPS, as mixed content could explain missing CSS files, but that’s all just speculation at this point.

1 Like

Yes HTTPS is always on setting is checked.

Will check on the server end. Maybe the problem’s there. Thank you again

1 Like

That does not apply to URLs within your document. If there is something HTTP related that would break it.

1 Like

I see. I’ve already setup the nginx configuration to redirect HTTP to HTTPS. Also use the SSL using Let’s Encrypt. And the last step was I added the cloudflare. So I think I’ve redirected HTTP to HTTPS.

http://zetrotranslation.com -> https://zetrotranslation.com
www.zetrotranslation.com -> https://zetrotranslation.com
http://www.zetrotranslation.com -> https://zetrotranslation.com

1 Like

This is not about redirects, this is about the links you have in your document. If there is any HTTP link that will break the layout, Cloudflare offers that additional rewrite option, however that does not fix all HTTP links and it’s also rather speculation at this point.

Without it being reproducible it is difficult to say more but it’s unlikely to be a Cloudflare issue (particularly because we already ruled out the cache).

1 Like

I see. Yeah there are a lot of url links associated there as it redirect to another page.

1 Like

I could just reproduce it. The inline CSS is completely different.

How many IP addresses do you have configured on Cloudflare? Could it be that you are pointing to two different machines?

1 Like

I only have one ip address but I’m using server blocks so I’m using multiple sites on a single ip address.

1 Like

So you have exactly two records (naked domain and www) with one single address each?

1 Like

try creating a “CAA” record with
Name: @
Flags: 0
TTL: auto
Tag Only allow wildcards
CA domain name: letsencrypt.org

content will show “0 issuewild letsencrypt.org

1 Like

The issue is not certificate related.

1 Like

I’ve asked a friend of mine about this and he says to wait for 24 hrs. I’ve checked it just now and it looks fine I guess. So maybe what I need was to wait for the cloudflare to propagate the site? Thank you all for the support. If this problem still persists I’ll remove cloudflare altogether.

1 Like

There is no propagation with Cloudflare. You did not confirm my previous question but assuming you only had one address, this was most likely an issue with your server, possibly in the combination with Cloudflare.

1 Like

I only have one domain bought and used the standard setup for web configuration that linode provided. Created a domain name zetrotranslation.com on linode and used the standard CNAME, AAA records and MX records there. Setup the SSL using let’s encrypt then afterwards applied cloudflare.

I don’t know if there will still be an issue with cloudflare but after I read the comment of a friend of mine that CF messes up design and based on his experience I should wait for around 24 hrs, I decided to do so. And so far, it’s doing okay so I guess this time it solved itself by time.

Thank you very much for all the help!

1 Like