[ioannis66]

Hello, my logo is blurry on my HD mobile phone.
The size of my logo is: 208 × 58

What custom css code do I need to use?
On another thread you say to upload it at double the size, is that right?

Thank you.

[ioannis66]

Should I use this custom css code for my logo size?

.title img { max-width: 230px; }
@media screen and (max-width: 479px) {
.title img { max-width: 70%; }
}

or not?

[Mehmet S.]

Hi, use double size images for the hd screens.

Thanks

[ioannis66]

Hello please tell me step by step.

1. make logo double size in photoshop 416 x 116

2. Upload to theme options

3. What custom css code should I use?

Thank you

[ahmetsali]

Hi, when you make it double size it shouldn’t be blurry on mobile, You can edit this custom css code to change the size of image logo for mobile devices;

@media (max-width: 767px) {
   h1.site-title img {
      max-height: 160px;
   }
}

[ioannis66]

If I upload it at double size, then on the desktop internet explorer it would appear as double size and this is not something we want, is that right?

[ahmetsali]

no it shouldn’t be double sized in desktops, because it’s height is limited via css.