Logo looks blurry

Themes
1

Hi all,

Our logo here is reportedly blurry for some users.

It’s a 1344 x 256 .svg file.

I have the following custom code via injection:

<!-- Desktop Styles -->
<style>
  .header__brand img {
    height: 110px;
    max-height: none;
  }

  .footer__brand img {
    height: 110px;
    max-height: none;
  }
</style>

<!-- Mobile Styles -->
<style>
  @media screen and (max-width: 1344px) {
    .header__brand img {
      height: auto;
      width: auto; 
    }

    .footer__brand img {
      height: 70px; /* Adjust the height for mobile */
    }
  }
</style>

This fixes the logo looking to small on some devices.

What could be the reason it’s blurry? Does this code need to be amended in some way? I don’t think it’s the image itself.

Any help would be greatly appeciated.

2

It looks okay on my device. (I’m visiting the site on mobile device)

For a fix, instead of using auto height for your logo on Mobile devices, set a definite value for height, keep width to auto and see if that fixes the problem.

I found 2 visual bugs though. Firstly, hamburger icon on menu button disappears when button is clicked and no cross icon is shown. This leaves a weird space on the left of Menu text.

Secondly, when there is an announcement bar on top. The menu bar moves downwards and covers some of the navigation links.

See attachment for better understanding.

Screenshot_20240927-145806_3
Screenshot_20240927-145806_31080×2008 175 KB

3

It is blurry for me. Windows 10, Chrome, desktop widths.

The following versions of the image are getting loaded:

I suggest a small theme edit - the theme creator has used a srcset for that image, thinking that you’d upload something that needed to be resized. Resizing svgs and/or converting them to webp doesn’t make a lot of sense. The webp is actually bigger. (I suspect there’s also a typo, as the image src’s is set to 30w instead of 300w – and that’s probably where the blur is coming from.)

4

It looks blurry to me specifically on the subtext that is colored pink.

image
image1417×134 39.2 KB

However, if you [right click] ⇨ [‘open image in new tab’]; You’ll notice it’s still blurry. Just a little less seemingly and probably due to the lack of anything else displaying.

image
image1417×134 35.6 KB

That tells me that the color choice and whatever other formatting that was applied to the logo itself is the culprit; Not Ghost.

Try editing it on an IPS with a large resolution until it looks right?

5

Thanks for your help everyone! :) I ended up fixing this by replacing {{> image}} with the SVG code instead, as suggested by the theme devs.

1 Like