Header / Logo – Retina Display (Metro Pro)

[helpsendbobo]

Hi there,

I am trying to have my logo image ready for display on Retina devices on my site, but so far it's still showing up as fuzzy on mobile devices. Can anyone help me out?

The site address is - http://www.backtothesong.com

This is what I've done so far:

I have changed the logo size to 150x150 (and centered it).
I have installed the WP 2x Retina plug-in.
The image file being used as the header is 'Logo.png' (150x150), and I have also uploaded another file titled '[email protected]' (300x300) in the Media Library as well.

Is there something else that I should be doing with the code?

Cheers!
Dennis

[nutsandbolts]

This tutorial should help you (and it eliminates the need for a plugin): http://writenowdesign.com/blog/wordpress/wordpress-how-to/add-retina-logo-genesis-template/

---

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

[helpsendbobo]

Hi Andrea,

Thanks for your help - I've uninstalled the plug-in, followed the instructions in the tutorial exactly, and also edited the min-heights/etc. to 150px and also put [email protected] into my images folder, but unfortunately it's still showing up as blurry on my cell phone... is there any step I might be missing?

Dennis

[sumoncpi]

Where is your logo ?

[helpsendbobo]

Hi there,

I uploaded a copy of the logo ('[email protected]') in my images folder of my theme (metro-pro/images), and in the style.css I've put:

@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) {
.header-image .site-title > a {
float: left;
min-height: 150px;
width: 100%;
background: url(images/[email protected]) no-repeat left top !important;
background-size: 150px 150px !important;
}
}

[nutsandbolts]

I see a Coming Soon screen when I try to check from my phone, so it will be difficult to advise from here.

---

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

[helpsendbobo]

Hi Andrea,

The coming soon screen (I'm assuming you're referring to the one that says 'Under Construction'?) is actually just a standard Static Page - it is still in the Metro Pro theme and the logo is there the top (if there's confusion, it's the blue box with the word 'Back to the Song' which is currently still fuzzy on Retina devices).

[nutsandbolts]

I don't get a logo at all when I load the site on my phone - this is my entire screen:

---

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

[helpsendbobo]

Hi Andrea,

That's very strange - there should be logo on top as well as a footer at the bottom. I'm loading the page now on my phone as well as my iPad and the logo and footer are showing up.

I've changed the settings now so the front page now just shows my 'latest posts' instead of the static page - does that make any difference to the display of the logo / footer?

[nutsandbolts]

I'm seeing "Sorry, no content matched your criteria" (which is what should be showing when there are no blog posts) but still no logo. Are you logged in on your phone and iPad?

---

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

[helpsendbobo]

Hi Andrea - I am not logged in to WordPress on either device. I've just double-checked and logged out on my laptop and tried loading the page again (in both Chrome and Firefox) and the logo does appear to be showing up, so it does appear that this is another issue (on top of the retina thing), as both the logo and the footer are missing for you.

Is there any reason Genesis/Wordpress might be doing this? / Has this happened before?

I guess I should ask if the logo and footer load up for you on a standard laptop / computer?

[nutsandbolts]

Yes, I do see the logo and footer on my computer. I get the footer on my phone as well; just not the logo.

It has to be related to the separate logo image for retina - either that or a caching issue. Is there any kind of caching plugin, Cloudflare, etc. activated either on the site or through the host?

---

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

[helpsendbobo]

Hi Andrea,

Thanks for clarifying that - there's no caching plugin as far as I am aware (I only have wordpress, genesis and jetpack installed).

If it helps in diagnosing the issue, this is what I've added to my stylesheet:

/* Retina Support */

@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) {

    .header-image .site-title > a {
        float: left;
        min-height: 150px;
        width: 100%;
        background: url(images/[email protected]) no-repeat left top !important;
        background-size: 150px 150px !important;
    }
}

And this is what the header-formatting looks like a bit further up in the stylesheet:

/* Logo, hide text */

.header-image .site-title,
.header-image .title-area {
	min-height: 150px;
	padding: 0;
}

.header-image .site-title a {
	background-color: none;
	max-width: 150px;
	min-height: 150px;
	padding: 0;
	margin-left: auto;
	margin-right: auto;
}

The first bit of the Media Queries bit in my stylesheet also looks like this (this is just the standard retina bit that came with the theme unedited - I realise there may be double up?):

/*
Media Queries
---------------------------------------------------------------------------------------------------- */

@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) {

	.after-entry,
	.comment-respond h3:after,
	.comment-respond h3:before,
	.entry-comments h3:after,
	.entry-comments h3:before,
	.entry,
	.widget-title:after,
	.widget-title:before {
		background-image: url(images/[email protected]);
	}

	.search-form input[type="search"] {
		background-image: url(images/[email protected]);
	}

}

[nutsandbolts]

Instead of creating a new section, I would remove the whole "retina support" section from the stylesheet and try adding the logo's CSS rule to the existing media query, so you end up with this:

/*
Media Queries
---------------------------------------------------------------------------------------------------- */

@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-title > a {
        float: left;
        min-height: 150px;
        width: 100%;
        background: url(images/[email protected]) no-repeat left top !important;
        background-size: 150px 150px !important;
        }

	.after-entry,
	.comment-respond h3:after,
	.comment-respond h3:before,
	.entry-comments h3:after,
	.entry-comments h3:before,
	.entry,
	.widget-title:after,
	.widget-title:before {
		background-image: url(images/[email protected]);
	}

	.search-form input[type="search"] {
		background-image: url(images/[email protected]);
	}

}

---

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

[helpsendbobo]

Hi Andrea,

Thanks for that. I appreciate your help so far and walking me through this process. I have cleaned up the CSS and incorporated the logo's CSS rule into the existing media query as you've outlined, but it is still the same.

Furthermore, I tested by replacing the url in the CSS with jibberish or other image addresses, and doing this appears to have absolutely NO EFFECT on what is being loaded on my smartphone (Nexus 4) or on my iPad Air - in both instances, even after clearing the cache of Chrome on both devices, the site still loads with the standard 150x150 logo (and I'm assuming in your case it will probably still show no logo at all).

Do you think this may be a problem with the CSS just not being applied / somehow being ignored, or the devices somehow not being recognised as retina (so that section is just bypassed)? / What other areas things should I be double checking? (or is there something I should be doing in my functions file?)

[gallo75]

Hello,
I've just modify header image on my Metro Pro theme for retina, please follow these steps:
1) Create a version of the logo file with double resolution, call this file [email protected], in the case of Metro Pro the header image is 270 x 80, so your retina version of the header image ([email protected]) should be 540 x 160.
2) Copy this file in the Images folder of your theme: wp-content/themes/metro-pro/images
3) Add the following code at the end of file style.css

@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) {
.header-image .site-title > a {
float: left;
min-height: 80px;
width: 100%;
background: url(images/[email protected]) no-repeat left top !important;
background-size: 270px 80px !important;
}
}

Note: After I did this job the image shown on the page was still the low resolution one, this is due to the cache of the browser (I am working on Safari on a Mac Pro Retina), but I repeat the test after some days and the images was replaced with retina version: so remember to clear the cache of your browser to test this modification.
Regards
Fabio

[Author]

Posts