Retina display media queries on sample child theme

[RobCubbon]

Hi,

I have changed the header image on my sample child theme.

In the Genesis settings I have "Use for site title/logo: Image logo" – obviously.

And then I've over-written the logo.png that exists in the images folder. (I have made this634 x 169px a different size than the existing one and I will create a media query to make sure I show another narrower logo when the site is viewed on a device with a narrower width than 634px).

So, all well and good. However I've noticed the following CSS in the styles.css and I just wanted to check what it was all about.

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (-moz-min-device-pixel-ratio: 1.5),
	only screen and (-o-min-device-pixel-ratio: 3/2),
	only screen and (min-device-pixel-ratio: 1.5) {

	.header-image .site-header .wrap {
		background: url(images/[email protected]) no-repeat left;
		background-size: 320px 164px;
	}

}

It's looks like it's to do with retina display devices that I wonder what size logo I should put overwrite the [email protected]

The original logo.png is 360 x 164
The original [email protected] is 720 x 328

My new logo.png is 634 x 169
What should my new [email protected] be?

I just wanna check if that doubling it up is the correct thing to do – I know nothing about retina display.

---

Rob Cubbon

[nutsandbolts]

Normally you'd want to create a [email protected] that is double the size of your regular logo - that allows it to look crisp on retina mobile devices. However, since your logo is a different size than the Sample theme's default, you'll likely need to make some other changes.

The CSS rule you pasted in above is basically saying "Use this much larger image (i.e. more pixels), but keep it at the original 320px by 164px size so it fits on the screen."

Since 320px is the max width for most mobile phones, I would probably change images/[email protected] to images/logo.png but make the background size half what it is on the normal logo. So you'd have this:

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (-moz-min-device-pixel-ratio: 1.5),
	only screen and (-o-min-device-pixel-ratio: 3/2),
	only screen and (min-device-pixel-ratio: 1.5) {

	.header-image .site-header .wrap {
		background: url(images/logo.png) no-repeat left;
		background-size: 317px 85px;
	}

}

That will have the same effect as far as using a higher res image squeezed into the right size for mobile, but without making your image so enormous that it doesn't fit. Hopefully that makes sense - this is all a shot in the dark since I don't have a link to the site to look.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[RobCubbon]

Thank you so much, nutsandbolts, I think I am understanding of these retina device media queries a little bit better – thank you so much.

Just to muddy the waters still further, I have added the following to my CSS this is to ensure my logo fits into the narrower devices:

@media only screen and (max-width: 1023px) {

.header-image .site-header .wrap {
		background: url(images/logo2.png) no-repeat;
		background-size: 320px 164px;
	}

}

So this logo2.png is 320 pixels by 164 pixels.

So maybe this would simplify things. As my logo on devices narrower than 1023 pixels wide will be the normal size, 320 pixels by 164 pixels, then I could keep the [email protected] as the same size as the original (720px x 328px) and keep the retina media queries the same as well.

Would that work?

The site isn't live yet but it will be very soon I hope.

---

Rob Cubbon

[RobCubbon]

I guess I will keep the retina display media queries as is and create a 2x larger version of the logo.

---

Rob Cubbon

[Author]

Posts