Header Option 2 + Retina 13" Macbook + Chrome Browser = Logo Alignment Bug

[Stephanie]

Hi there,

I have found that the following recipe creates a bug with the alignment of the logo.

When viewed on a 13″ Retina MacBook (& presumably other retina laptops), on the Chrome browser, using Header option 2 where the logo should be centred, I get the following alignment issue: http://i.imgur.com/a6EZYv4.png

But when I move that very same window over to my non-retina, external monitor, it pops back to normal: http://i.imgur.com/xC31fai.png

Any CCS fix to help with this?

Thanks

[Rui Guerreiro – SUPPORT]

Hi,

Your site is in maintenance mode, can you provide us admin credentials so we can check it?

Use the private reply.

-Rui

[Stephanie]

This reply has been marked as private.

[Nishant – SUPPORT]

Hi,

The below custom css will solve your problem.

@media 
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-device-width: 1025px),
only screen and (   min--moz-device-pixel-ratio: 2) and (min-device-width: 1025px),
only screen and (   -o-min-device-pixel-ratio: 2/1) and (min-device-width: 1025px),
only screen and (        min-device-pixel-ratio: 2) and (min-device-width: 1025px),
only screen and (           min-resolution: 192dpi) and (min-device-width: 1025px),
only screen and (            min-resolution: 2dppx) and (min-device-width: 1025px) {

    div#logo.has-img {
	  height: auto;
	}
	#logo.logo-center a {
	  height: auto;
	}
	#logo img.retina {
	  max-width: 100%;
	}	
}

If this works for you do reply us

Thanks

[Stephanie]

Thank you.

It is definitely an improvement, but not quite right. Now the logo on a retina screen is roughly in the right spot but much too high, like it is aligned to the top, rather than the middle.

Non-retina screen: http://imgur.com/6Xjh5D1,eIVN52o#1
Retina screen: http://imgur.com/6Xjh5D1,eIVN52o#0

(P.S. when the correct CSS solution is found, will this be built into future updates, so that I may remove the custom code eventually?)

[David Martin – Support]

Hi,

I am testing this on my retina screen and the spacing is not there, have you cleared out any plugin or browser caching?

You could alter the margin, ex, change this to alter for your needs: margin-bottom: -20px;

@media 
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-device-width: 1025px),
only screen and (   min--moz-device-pixel-ratio: 2) and (min-device-width: 1025px),
only screen and (   -o-min-device-pixel-ratio: 2/1) and (min-device-width: 1025px),
only screen and (        min-device-pixel-ratio: 2) and (min-device-width: 1025px),
only screen and (           min-resolution: 192dpi) and (min-device-width: 1025px),
only screen and (            min-resolution: 2dppx) and (min-device-width: 1025px) {
 
    div#logo.has-img {
   margin-bottom: -20px;
   height: auto;
 }
 #logo.logo-center a {
   height: auto;
 }
 #logo img.retina {
   max-width: 100%;
 } 
}

Thanks.

[Stephanie]

Hi there,

I’ve cleared browser cache and plugin cache, disabled all plugins, even tried the code above while adjusting the margin value and no matter what, it doesn’t fix the spacing. The logo is still aligning to the top when viewed on a retina screen, then back to the middle for a normal screen.

This is happening on both Safari and Chrome, on my Late 2013 Retina MBP 13″.

Non-retina screen: http://imgur.com/6Xjh5D1,eIVN52o#1
Retina screen: http://imgur.com/6Xjh5D1,eIVN52o#0

[David Martin – Support]

Hi,

I could replicate this on my retina Macbook, I have resolved this by adding a small margin for only retina devices.

Can you confirm you now see this ?

– David,

[Stephanie]

Thanks David yes that has fixed it! (I think we were working in the theme settings at the same time, I kept losing settings and wondering why haha – woops!)

[David Martin – Support]

Great stuff, glad it’s working for you!

– David.