Mobile shows no Sharp icons

Hi @conversiewebsite,

Try to use a higher size, at the moment I’m seeing the icon images with 24×24 size.

If you increase the image size on the settings don’t forget to regenerate all thumbnails.

I just placed them on original size (which is good!).
But can you send me a CSS code I can add? So that the icons will still show at 24×24 pixels size.

That will do the trick for a lot of users.

That would fix everything.

The reason is that if only the pixels are showing at a low resolution like 24px. The sharpness will be affected.

So best to do it in CSS later. Can you provide me the CSS code for this?

Hi @conversiewebsite,

Try this code to see if it works.

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
 img.menu-image{
    width:24px;
  }
}

Hi Rui,

I placed it into the extra CSS module but it’s not working.
However this code is working for some part:

img.menu-image {
width: 24px!important;
}

But then the hover effect jumps as you can see on the website right now (our CSS is now placed on the website).

hhum, to me it looks sharp in retina device. In a normal monitor you won’t get the same definition.
https://share.getcloudapp.com/L1ukYb6Z

Yes but I paste our code. The code you gave did nothing.

We want in Desktop and mobile 24px.
But hover over the menu now on desktop. You see it jumps in a strange way.

@conversiewebsite are you still facing this issue?

No we hired a programmer to fix it.

This is the code we use now:

img.menu-image {
width: 24px!important;
}
.menu-item:hover img.hovered-image {
margin-left: -24px!important;
width: 24px;
}
.menu-image-hover-wrapper img.hovered-image, .menu-item:hover .menu-image-hover-wrapper img.menu-image {
transition: none;
}

That’s great. Thanks for sharing.