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.
Thread Starter
cwebsite
(@conversiewebsite)
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.
Thread Starter
cwebsite
(@conversiewebsite)
That would fix everything.
Thread Starter
cwebsite
(@conversiewebsite)
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;
}
}
Thread Starter
cwebsite
(@conversiewebsite)
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).
Thread Starter
cwebsite
(@conversiewebsite)
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?
Thread Starter
cwebsite
(@conversiewebsite)
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.
