Retina screen

  • Author
    Posts
  • #101564

    tchatcha75
    Member

    Hi,

    I’m trying to put a custom image in the header but it’s a little bit blur. Is it because I don’t manage images well enough or is it because I use a retina screen. I saw that to manage retina screens some CSS sheets are proposing to have an image twice the size but displayed at normal size. Is it possible with HM Magazine theme ?

    Best,

    The blog I need help with is aspofrance.wordpress.com.

    #101666

    mhthemes
    Member

    Hi tchatcha75,

    we checked your logo on various devices (iMac, iPad and iPhone) and it’s displaying fine for us and doesn’t seem to be blurry.

    I saw that to manage retina screens some CSS sheets are proposing to have an image twice the size but displayed at normal size.

    There are a few approaches for that, but it’s usually handled via plugins. You can’t install WordPress plugins on WordPress.com, so that doesn’t seem to be something that is possible out of the box.

    #101669

    tchatcha75
    Member

    Hi,

    Thank’s for this fast answer.

    Still, I did similar tests and it appears that on a non retina device there is no difference of definition between the logo and the menu just bellow but on a retina screen there is a noticable difference : the menu bellow is much sharper, so by contrast the logo looks slightly blurry.

    As the number of retina and HD screens (for Windows) is going to be growing in the future, it would be nice to implement this feature with CSS (as plugins install is sadly not possible on wordpress.com you said).

    I guess it would simply be to tell to show the logo image with a size of 140 x 340 what ever the definition of the picture actualy is, and the picture would HAVE to be 280 x 640 and nothing else. It’s a bit of a constraint for webmasters but you are supposed to know what you are doing if you add some custom CSS.

    Thank’s in advance for your help :-)

    #101670

    mhthemes
    Member

    If that’s what you want, you can of course reduce the size of the logo with a line of CSS, for example:

    .logo-wrap img { width: 70px; }

    Your uploaded logo currently has a width of 140px, and with the CSS code you can display it smaller based on your personal requirements.

The topic ‘Retina screen’ is closed to new replies.