Logo blurry on mobile (Redhill)
-
I’m working on a site using the Redhill theme. I added a custom logo. It looks fine on desktop, but the lettering doesn’t look as crisp on mobile. Is the image being compressed somehow, and is there a way to override this?
The blog I need help with is: (visible only to logged in users)
-
Hi there!
I had a look at mindfulmovementshealthcoaching.com, but I do not see any issue with the logo on smaller screens. Would you be able to add screenshots of what you see on your end? You can use an online tool for that (such as https://snipboard.io/) and paste the links into your reply.
Thanks! -
Thanks for taking a look! The logo looks okay if I size down my browser window on desktop, but if I look at it on my phone, that’s when I notice the issue.
Here’s a screenshot from mobile: https://snipboard.io/yFvCM0.jpg
Here’s one from desktop: https://snipboard.io/AUjVCO.jpg
It’s subtle, but the lettering just doesn’t look as sharp to me on mobile.
Thank you!
-
Is it the case that your laptop uses a standard resolution screen but your phone has a high-res “retina” display?
The logo on your site is set at 72dpi, but some phones (all iPhones, some Android) will have screens that have much denser resolution, sometimes up to 300+ dpi.
On screens with resolutions higher than 72dpi, the logo will appear softer than it would on a standard resolution screen since the logo is not optimized for hi-dpi displays. Is this a site for a client? It may be possible to serve a high-res version of the logo using custom CSS code, but to do that will require upgrading mindfulmovementshealthcoaching.com to our Premium plan. https://wordpress.com/pricing/
-
That is a definite possibility. My laptop is older than my iPhone, so it would make sense that it’s a screen resolution issue.
This is a site for a client. Can you send me the CSS code for the potential fix, and I’ll see if my client is willing to upgrade to a premium plan?
Thanks!
-
Ah, I see the problem. This isn’t a CSS fix.
The image is essentially too small. It’s crisp on your lower definition laptop screen, but not on higher definition modern device screens.
So, the devices with higher definition screens are just stretching the file, making it blurry.
To avoid that, you will need to upload a much larger original, at least 2x as big, for the icon.
The theme will take care of making sure the image is displayed at the right size, scaled down for lower resolution screens, and the original for higher resolution screens, which means it will remain crisp either way.
-
The theme doesn’t appear to lock the logo at a specific size.
The original is 350×350: https://snipboard.io/mMdKlV.jpg
I uploaded a 1000×1000, and it’s giant: https://snipboard.io/eIR8zp.jpg
-
Hi again,
To get a high-res logo to appear will require two steps. The first is to upload your 1000px version of the logo but skip the cropping step. It looks like this: https://d.pr/v/m70hGl
This will force the logo to show at full size instead of being cropped to 350px. Once that is set you would add this CSS in a second step, which will scale the image so it is the correct size, but with the pixel depth necessary to show up as sharp on retina displays:
.site-branding .custom-logo-link img { height: 301px; width: 277px; }The end result is no change on desktop, but a sharp (high res) logo on retina displays. Hope that helps. Please let us know if you have any more questions.
-
Thank you! I’ll see if I can get my client to upgrade to a premium plan, so I can make this change. Appreciate the help!
- The topic ‘Logo blurry on mobile (Redhill)’ is closed to new replies.
WordPress.com Forums 
