Forum Replies Created
-
AuthorPosts
-
helpsendboboMember
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?)
helpsendboboMemberHi 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]); } }
helpsendboboMemberHi 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?
helpsendboboMemberHi 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?
helpsendboboMemberHi 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).
helpsendboboMemberHi 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;
}
}helpsendboboMemberHi 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
-
AuthorPosts