Support » Plugin: Menu Image, Icons made easy » Mobile shows no Sharp icons

  • See the mobile menu. Although the images are showing very nicely on desktop. The mobile is not showing sharp menu icons.

    Can this be fixed, with a update? I pay for a donation without problem. 😉

    The page I need help with: [log in to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Author Rui Guerreiro

    (@takanakui)

    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?

    Plugin Author Rui Guerreiro

    (@takanakui)

    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).

    Plugin Author Rui Guerreiro

    (@takanakui)

    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.

    Plugin Author Rui Guerreiro

    (@takanakui)

    @conversiewebsite are you still facing this issue?

    conversiewebsite

    (@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;
    }
Viewing 10 replies - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.