Foodie Theme Header Retina

[Nagi_RecipeTinEats]

Hi - I customised the header size for the Foodie theme. Default was 400 x 170, I changed it to 450 x 80. It works fine I think!) and is responsive BUT it is blurry on retina screens. I am told the Foodie theme is not retina ready so I need to add additional coding to cover retina devices. Does anyone know what I need to do so the image will display at a higher resolution on retina screens?

My website is http://www.recipetineats.com. The designer, Shay Bocks, directed another blogger to this website and said it should work, but it does not. http://www.mediacrazed.com/tutorials/retina-logo-agency-pro-theme/

Thanks in advance!!

http://www.recipetineats.com

[Anita]

In your style.css under Media Queries, I see 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 {
		background-size: contain !important;
	}

}

However, the code in the tutorial is 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),
	only screen and (min-resolution:120dpi) {

	.custom-header .site-title a {
		background: url(images/[email protected]) no-repeat left !important;
		background-size: 300px 60px !important;
	}

}

Did you actually try the tutorial code and then remove it?

Also, you need to clear your cache. That can also have an effect.

---

Love coffee, chocolate and my Bella!

[Author]

Posts