Logo is blurry on mobile view

• 

  apxril · Member · Jul 4, 2020 at 8:36 am

  • Copy link
  • Add topic to favorites

  Hi, my logo looks crisp on Desktop view but on Mobile view, it looks blurry. I tried saving it as PNG-8 and PNG-24. Any workaround for this?

  My device is iPhone 11 and It looks the same for Safari and Chrome. Here’s what it looks like on my device: https://i.imgur.com/iEZY5tG.png

  It doesn’t look that bad on screenshot but you will know what I mean if you will view it on mobile here: https://apxril.wordpress.com/

  The blog I need help with is: (visible only to logged in users)

• 

  supernovia · Staff · Jul 6, 2020 at 10:26 pm

  • Copy link

  Hi @apxril, it looks fine on my iPhone screen. Are you zooming into the images at all? We do optimize for mobile so folks don’t have to download full-sized images that would eat up their data.

• 

  supernovia · Staff · Jul 6, 2020 at 10:31 pm

  • Copy link

  Actually I did just check and confirmed the logo being used on mobile is 150px wide, but it’s being displayed a little wider than that.

  I’ll see if I can file an issue with the mobile theme.

• 

  supernovia · Staff · Jul 6, 2020 at 10:34 pm

  • Copy link

  Actually I did just check and confirmed the logo being used on mobile is 150px wide, but it’s being displayed a little wider than that.

  I’ll see if I can file an issue with the mobile theme.

• 

  supernovia · Staff · Jul 6, 2020 at 10:40 pm

  • Copy link

  @apxril – my bad. That code seems to adapt by screen size. Honestly, from what I’m seeing it looks fine (on my SE, so smaller screen but decent display.)

  Would you be willing to try uploading the logo at a higher resolution to see if that helps? Right now it looks like your max version is 200px wide.

• 

  apxril · Member · Jul 8, 2020 at 5:49 am

  • Copy link

  Hi @supernovia, I tried uploading in larger size but the theme sadly doesn’t auto-resize to fit :( the size would display the size as is, and it would look too big. Can you file this issue to the theme? thank you so much for looking into this!

• 

  kokkieh · Staff · Jul 8, 2020 at 8:02 am

  • Copy link

  I’m not sure the theme is the problem here:

  Currently your logo displays at 200px wide on desktop, and exactly the same size on mobile. In fact, the source code via which the image loads on mobile is identical to what loads in the browser. It’s just directly inserting the file at https://apxril.files.wordpress.com/2020/07/apxril-watermark-2-1.png without modifying it in any way.

  It also doesn’t look blurry at all in the mobile view I get using responsive mode in my browser, but I do see it in Chrome and Firefox on Android, so this only appears to happen in an actual mobile browser.

  I do see the suggested logo dimensions for your theme is 100 by 96 pixels, so can you try exporting a PNG at that size and set it as logo, to check if that makes any difference?