Logo Squashed on Retina Displays

[Klarity]

Hi David,

sorry its taken a while heres the screen shot from the ipad (4 retina)

many thanks,

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

I do not have a retina iPad, only retina Mac and retina iPhone. Both of which show the header logo to be really crisp.

I have asked the team if they can also test this. Can you clear the iPad safari cache?

This specific media query will target the iPad 4, if the above fails:

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) { 
   #mobile-logo img.retina,
   .full-center #logo.has-img a > img {
    width: auto!important;
   }

}

Thanks.

[Klarity]

Thanks,

Not sure that css has worked?
you can actually see the issue in the inspect console (in chrome)
Seems to still be there…

Many thanks,

Pete

[Klarity]

Just checked this out on the ipad.

The portrait version looks fine. Just the landscape version where the logo is still squashed.

(Cache cleared + Css uploaded)

Cheers,

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

Here is a media query for a retina iPad in landscape mode, please place this at the bottom of the custom CSS:

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) {

#logo img.retina {
    width: auto;
    max-width: 110px;
    height: initial;
}

#logo.has-img img {
    max-height: 95px;
    max-height: initial;
    max-width: 110px;
    width: initial;
}

}

– David

[Klarity]

Hi David,

This has resolved the problem. many thanks for your help!

Best

Pete

[David Martin – Support]

Happy to of helped you Pete!

– David.