Logo issue

[micheal_w]

Hi guys,
the logo on smaller desktop screens is moving down (out) from the header..
see screenshot attached / link above…

Can you please advise how to solve this?
Thanks!

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Whats your exact screen size?
Thanks
Mohammad

[micheal_w]

Hi Mohammad, I have a 27inch iMac, but the issue is there from 1199px (between 992-1199px only). The logo issue is there if I check on my large screen (between the previously mentioned range), on laptop or even on iPad (horizontal).

https://www.dropbox.com/s/kf74h3lzs32p9w2/Untitled.mov?dl=0(ps. dropbox makes movies look bad, download it if needed, it is more crisp)

[Mohammad – SUPPORT]

Hi,
My colleague will check on Mac machine.
Thanks
Mohammad

[micheal_w]

Hi Mohammad, it seems a simple cache clearing has solved this issue…
Thank you for your time.

[Kyle – SUPPORT]

Ok great!

[micheal_w]

Hi Kyle, Mohammad, I was wrong unfortunately, emptying the cache didn’t solve the problem.

I started to think what happened between the issue when existed and disappeared, and then I realised that I used different screens!
I just tested and now I know the issue:

The logo moves down on retina screens only (iMac, Mac, iPad) but stays on all other screens with no retina resolution…
Any recommendation how to solve this?

[David Martin – Support]

This is my Retina Macbook:

If I purposely shrink the browser, then I can replicate it. Please test adding this:

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 
#logo img.retina, 
#logo h1.retina,
#mobile-logo img.retina, 
#mobile-logo h1.retina {
    max-width: 97%;
}
}

[micheal_w]

Hi David,

something is not good, I get many red X-s, see attached.

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

You have missed the last closing bracket.

THanks.

[micheal_w]

This reply has been marked as private.

[David Martin – Support]

Can I get a WP login?

Cheers.

[micheal_w]

This reply has been marked as private.

[David Martin – Support]

Ah yes, please amend to this more updated query:

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
#logo img.retina, 
#logo h1.retina,
#mobile-logo img.retina, 
#mobile-logo h1.retina {
    max-width: 97%;
}
}

[micheal_w]

Thanks David!

Almost there, one more little thing:

The displaying of the logo (and the right side icons) are always delayed compared to the other parts of the header. It seems that the loading of the logo takes longer than usual, but it is only 8kb! (see attachement header.mov)

Is this normal?

Attachments:

You must be logged in to view attached files.