Header / Logo – Retina Display (Metro Pro)

Community Forums Forums Design Tips and Tricks Header / Logo – Retina Display (Metro Pro)

This topic is: not resolved

This topic contains 14 replies, has 3 voices, and was last updated by  helpsendbobo 3 months, 3 weeks ago.

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #106731

    helpsendbobo
    Member
    Post count: 10

    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 150×150 (and centered it).
    I have installed the WP 2x Retina plug-in.
    The image file being used as the header is ‘Logo.png’ (150×150), and I have also uploaded another file titled ‘Logo@2x.png’ (300×300) in the Media Library as well.

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

    Cheers!
    Dennis

    #106878

    nutsandbolts
    Moderator
    Post count: 3130

    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, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #106903

    helpsendbobo
    Member
    Post count: 10

    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 Logo@2x.png 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

    #106927

    sumoncpi
    Blocked
    Post count: 13

    Where is your logo ?

    #106934

    helpsendbobo
    Member
    Post count: 10

    Hi there,

    I uploaded a copy of the logo (‘Logo@2x.png’) 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/logo@2x.png) no-repeat left top !important;
    background-size: 150px 150px !important;
    }
    }

    #107001

    nutsandbolts
    Moderator
    Post count: 3130

    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, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #107023

    helpsendbobo
    Member
    Post count: 10

    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).

    #107025

    nutsandbolts
    Moderator
    Post count: 3130

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



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

    #107028

    helpsendbobo
    Member
    Post count: 10

    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?

    • This reply was modified 3 months, 3 weeks ago by  helpsendbobo.
    • This reply was modified 3 months, 3 weeks ago by  helpsendbobo.
    #107030

    nutsandbolts
    Moderator
    Post count: 3130

    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, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #107031

    helpsendbobo
    Member
    Post count: 10

    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?

    #107033

    nutsandbolts
    Moderator
    Post count: 3130

    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, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #107037

    helpsendbobo
    Member
    Post count: 10

    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/Logo@2x.png) 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/lines@2x.png);
    	}
    
    	.search-form input[type="search"] {
    		background-image: url(images/search@2x.png);
    	}
    
    }
    #107043

    nutsandbolts
    Moderator
    Post count: 3130

    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/Logo@2x.png) 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/lines@2x.png);
    	}
    
    	.search-form input[type="search"] {
    		background-image: url(images/search@2x.png);
    	}
    
    }

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

    #107099

    helpsendbobo
    Member
    Post count: 10

    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 150×150 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?)

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.