HELP PLEASE - Blurry Logo

Help required, my logo is blurry when viewing on mobile.

How do I fix this?


Here is my site Read-Only: https://preview.webflow.com/preview/jonnys-mnc-digital-website?utm_medium=preview_link&utm_source=dashboard&utm_content=jonnys-mnc-digital-website&preview=49ac087856408ea835ca0151cd6b7178&mode=preview

Your link doesn’t seem to be working, can you double check that it’s correct and you didn’t disable the read-only link in the Designer?

Apologies, my fault. Try this :slight_smile:

https://preview.webflow.com/preview/jonnys-mnc-digital-website?utm_medium=preview_link&utm_source=designer&utm_content=jonnys-mnc-digital-website&preview=49ac087856408ea835ca0151cd6b7178&mode=preview

This looks like it may be due to the transform you’ve applied as hiding that style on the Brand link block seems to sharpen it right up.

If possible you could replace that PNG with a vector (I notice you’ve got a SVG version in the assets) as I’d imagine you’ll get a sharp result regardless of any transforms you apply to it. I’d recommend giving that a try and see if it solves the issue :+1:

I’ve just doubled the size and which has sharpened it up and resolved the issue.

Thanks for taking the time to reply though, much appreciated

Hi,

I’m having the same problem with the added “transform: translate3d(0px, 0px, 0px);”
Removing it sharpens the logo… but I’m unsure what to do in webflow to fix it? Do you by any chance have a solution?

I’m using a Lottie (.json) as the logo. We want to make an animated logo at some point. And I had trouble using .svg because Safari was not showing it for some unknown reason.