Support Forum - User Favorites: lindseymdaniels

Support Forum - User Favorites: lindseymdaniels lindseymdaniels Support Forum - User Favorites: lindseymdaniels en-US Wed, 19 Jun 2013 01:33:43 +0000 http://bbpress.org/?v=1.0.2 <![CDATA[Search]]> q http://www.kriesi.at/support/search.php Devin on "Form fields not displaying in IE" http://www.kriesi.at/support/topic/form-fields-not-displaying-in-ie#post-100202 Fri, 08 Mar 2013 14:04:33 +0000 Devin 100202@http://www.kriesi.at/support/ Glad Nick could help :) Let us know if you have any other questions or issues. Regards, Devin Lindsey on "Form fields not displaying in IE" http://www.kriesi.at/support/topic/form-fields-not-displaying-in-ie#post-100088 Thu, 07 Mar 2013 18:21:30 +0000 Lindsey 100088@http://www.kriesi.at/support/ Thank you so much, Nick! That worked perfectly! I really appreciate your help!! Kudos!! - Lindsey Nick on "Iconbox Retina Image Replacement" http://www.kriesi.at/support/topic/iconbox-retina-image-replacement#post-99966 Thu, 07 Mar 2013 04:04:13 +0000 Nick 99966@http://www.kriesi.at/support/ Hi, Ahh. I am sorry, thought this was about the main page. Now that we are on the same page, On the recipes page you showed above, the image of the icon itself is in the html which is not as favorable to the media query approach to doing this. Need either a jquery solution or to detect retina via php where the short-code is executed. I looked for some jquery for retina replace ( <a href="https://github.com/leonsmith/retina-replace-js" rel="nofollow">https://github.com/leonsmith/retina-replace-js</a> ) but all i find assumes that both the retina image and the normal image are defined inside css so the classes can be switched. Also there are no distinguishing classes to grab an individual icon, since the code is same for all of them. Here is actually a good solution <pre><code><html> <head> <style type="text/css"> .image_1_5x, .image_2x{ display: none; } @media only screen and (min--moz-device-pixel-ratio: 1.5 ), only screen and (-webkit-min-device-pixel-ratio: 1.5 ), only screen and (min-device-pixel-ratio: 1.5 ), only screen and (-o-min-device-pixel-ratio: 3/2){ .image_1x, .image_2x{ display: none; } .image_1.5x{ display: block; } } @media only screen and (min--moz-device-pixel-ratio: 2 ), only screen and (-webkit-min-device-pixel-ratio: 2 ), only screen and (min-device-pixel-ratio:2 ), only screen and (-o-min-device-pixel-ratio: 2/1){ .image_1x, .image_1_5x{ display: none; } .image_2x{ display: block; } } </style> </head> <body> <img src="kinkakuji.jpg" width="320px" class="image_1x"/> <img src="kinkakuji@1.5x.jpg" width="320px" class="image_1_5x"/> <img src="kinkakuji@2x.jpg" width="320px" class="image_2x"/> </body> </html></code></pre> Thanks, Nick Nick on "Form fields not displaying in IE" http://www.kriesi.at/support/topic/form-fields-not-displaying-in-ie#post-99944 Thu, 07 Mar 2013 01:31:46 +0000 Nick 99944@http://www.kriesi.at/support/ Hi, I changed the jquery above in my last post a bit because the one you had is causing an error , that is why ie9 etc,. wouldn't display it. So please overwrite with this update above and see if this time it works better. Thanks, Nick Lindsey on "Iconbox Retina Image Replacement" http://www.kriesi.at/support/topic/iconbox-retina-image-replacement#post-99917 Wed, 06 Mar 2013 22:50:41 +0000 Lindsey 99917@http://www.kriesi.at/support/ Hi Nick, Thank you for your patience with me! :) This is actually the smoothie page that I'm referring to - not on the homepage - : <a href="http://www.toxicfreechallenge.com/recipes/strawberry-festival-smoothie/" rel="nofollow">http://www.toxicfreechallenge.com/recipes/strawberry-festival-smoothie/</a> The icons are coded differently than the home page where I didn't use the iconbox shortcodes. The icons on this page are shortcodes and the span class I see in Google Chrome is "iconbox_icon", not "smoothie". <pre><code>[iconbox title="Fruits:" icon="fruits.png"] <ul> <li>1 teaspoon lemon zest, grated</li> <li>3 cups strawberries</li> </ul> [/iconbox]</code></pre> Just to clarify, are you saying I should replace this shortcode (as well as the other shortcodes) [iconbox title="Fruits:" icon="fruits.png"] on each of my 125 pages with this? <code></code> Thanks for your patience!! - Lindsey Lindsey on "Form fields not displaying in IE" http://www.kriesi.at/support/topic/form-fields-not-displaying-in-ie#post-99896 Wed, 06 Mar 2013 21:27:35 +0000 Lindsey 99896@http://www.kriesi.at/support/ Awesome! Thanks for your help. This solution worked for me in IE10 (however most people using IE are still in IE9). It is still much better than not having it in any IE browser, and hopefully people will upgrade soon. Thank you, again, Nick! You're the best. - Lindsey Nick on "Iconbox Retina Image Replacement" http://www.kriesi.at/support/topic/iconbox-retina-image-replacement#post-99864 Wed, 06 Mar 2013 18:49:17 +0000 Nick 99864@http://www.kriesi.at/support/ Hi, Try this <pre><code>#top span.smoothie{ background: url("http://www.toxicfreechallenge.com/wp-content/themes/propulsion/images/icons/iconbox/fruits.png") no-repeat scroll 0 0 transparent; display: inline; height: 149px; left: 0; padding-left: 60px; padding-top: 20px; padding-bottom: 10px; width: 48px; } @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) { #top span.smoothie{ background: url("http://www.toxicfreechallenge.com/wp-content/themes/propulsion/images/icons/iconbox/fruits@2x.png")no-repeat scroll 0 0 transparent; } }</code></pre> and you would call it from your pages like this. h6 is not relevant here. I tested this on your site with google dev tools, and I am seeing the icon. Just make sure you have the retina icon where the url points and change the names for your icons. Iconbox is just a name of a folder , if you like you can change it to foobar, there is no need to get fixated with that name. <pre><code></code></pre> Thanks, Nick Nick on "Form fields not displaying in IE" http://www.kriesi.at/support/topic/form-fields-not-displaying-in-ie#post-99789 Wed, 06 Mar 2013 11:49:27 +0000 Nick 99789@http://www.kriesi.at/support/ Hi, Whichever way you want, either of the first two examples look good to me. Then you will also need to add that little bit inline jquery into the page <pre><code><script> jQuery(document).ready(function($) { $('input, textarea').placeholder(); }); </script></code></pre> You can also hard-code it in the footer.php next to the other inline jquery. Thanks, Nick Lindsey on "Iconbox Retina Image Replacement" http://www.kriesi.at/support/topic/iconbox-retina-image-replacement#post-99717 Wed, 06 Mar 2013 00:45:53 +0000 Lindsey 99717@http://www.kriesi.at/support/ Thank you, Dude! He wrote back that he decided not to provide support via email, except if it is paid. He also said: "iconbox" seems to be a shortcode of your theme. Not sure if the images (icons) are from you, but if they aren't there are probably shipped with the theme and if they don't provide bigger version, well, you will have to use new ones, and probably to modify your theme code a bit. To which I wrote that I understood not providing unpaid support, as his plugin was free, and I noted that I designed my shortcode iconbox icons and they're in vector format. He replied that if they are in vector formats, I can use SVG versions of them for the website and it will work automatically in Retina. If they are part of the theme, we shouldn't have them in the Media, they should actually be "outside" WordPress, with the @2x generated manually by you. Then in the CSS (device-pixel-ratio: 2), you specify the @2x files. He also said his plugin should cover the posts and all, not the images related to the themes. The themes should handle Retina themselves (since they often provides the icons and main images). I've never added SVG files to CSS although I have added @2x in media queries so I have to figure this next step out. - Lindsey Lindsey on "Form fields not displaying in IE" http://www.kriesi.at/support/topic/form-fields-not-displaying-in-ie#post-99716 Wed, 06 Mar 2013 00:40:42 +0000 Lindsey 99716@http://www.kriesi.at/support/ Thank you so much, Nick! This helps, and it's a bit embarrassing but I have to learn this and need clarification, please. I have placed the jquery.placeholder.min.js file in my js folder. I haven't added a script to WP prior to this - only on hand-coded XHTML sites like my portfolio (www.iamlindsey.com) - not PHP like WP. (If it wasn't PHP - I'd put <script type="text/javascript" src="js/jquery.placeholder.min.js"></script> in the header. ) Would I place it in functions.php with the other .js files, like this? if(!function_exists('avia_frontend_js')) { function avia_frontend_js() { wp_register_script( 'avia-default', AVIA_BASE_URL.'js/avia.js', array('jquery','avia-html5-video'), 1, false ); wp_register_script( 'avia-prettyPhoto', AVIA_BASE_URL.'js/prettyPhoto/js/jquery.prettyPhoto.js', 'jquery', "3.0.1", true); wp_register_script( 'avia-default', AVIA_BASE_URL.'js/jquery.placeholder.min.js', array('jquery', 1, false or true? ); wp_register_script( 'avia-html5-video', AVIA_BASE_URL.'js/projekktor/projekktor.min.js', 'jquery', "1", true); wp_register_script( 'adaptavia-slider', AVIA_BASE_URL.'js/adaptavia.js', 'jquery', "1.0.0", true); } } Or would it be something like this in functions.php? <?php function my_scripts_method() { wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/jquery.placeholder.min.js', array('jquery') ); } add_action('wp_enqueue_scripts', 'my_scripts_method'); ?> Thanks for your clarification and time!! - Lindsey Dude on "Iconbox Retina Image Replacement" http://www.kriesi.at/support/topic/iconbox-retina-image-replacement#post-99557 Tue, 05 Mar 2013 09:40:19 +0000 Dude 99557@http://www.kriesi.at/support/ Hi! Please report back if the plugin author provided a solution (or not). Best regards, Peter Nick on "Form fields not displaying in IE" http://www.kriesi.at/support/topic/form-fields-not-displaying-in-ie#post-99536 Tue, 05 Mar 2013 07:42:29 +0000 Nick 99536@http://www.kriesi.at/support/ Hi, IE does not recognize the placeholder property, thus it doesn't display anything inside the text fields. What you need to do is use this jquery (demo <a href="http://mathiasbynens.be/demo/placeholder" rel="nofollow">http://mathiasbynens.be/demo/placeholder</a> ) script ( <a href="https://github.com/mathiasbynens/jquery-placeholder/blob/master/jquery.placeholder.min.js" rel="nofollow">https://github.com/mathiasbynens/jquery-placeholder/blob/master/jquery.placeholder.min.js</a> ) You will need to add the jquery.placeholder.min.js file to your website, and then hardcode it or enqueue it like the other .js files and then just repeat what the demo does. Thanks, Nick Lindsey on "Iconbox Retina Image Replacement" http://www.kriesi.at/support/topic/iconbox-retina-image-replacement#post-99479 Mon, 04 Mar 2013 21:36:24 +0000 Lindsey 99479@http://www.kriesi.at/support/ Thanks for helping, Nick! I tried your suggestion and to no avail. Then realized the .smoothie is actually coded in HTML as a class of the H6 tag, not an iconbox shortcode. I had setup WP Retina 2x when you suggested it previously and it is a wonderful plugin but doesn't show my shortcodes in the dashboard. I have emailed the creator, Jordy Meow to see if he can advise a solution or a reason as to why I don't see the images in the WP Retina 2x dashboard. I will update you as soon as I hear from him. Thanks so much for always kindly helping me! - Lindsey Lindsey on "Form fields not displaying in IE" http://www.kriesi.at/support/topic/form-fields-not-displaying-in-ie#post-99445 Mon, 04 Mar 2013 19:22:34 +0000 Lindsey 99445@http://www.kriesi.at/support/ Hi Team, I'm not sure if this is part of the theme conflicting with the Digital Downloads plugin or not. Is there a way to tell? If you can give me advice on how to identify this, that would be great. I don't want to waste your valuable support time if this isn't a conflict with the theme. Here is my urgent issue (urgent because I launched my business two days ago and have been heavily campaigning and running ads and tweets to this post which contains a form that isn't showing field names for anyone using IE (even version 9+). These browser users are not able to see the fields that are in my download form such as \"email\", \"name\", etc. This is a problem because my customers are already emailing me telling me that they cannot download it when using IE. You will see the form if you use IE and hit \"Check Out\" on my free download at: <a href="http://toxicfree.me/YVFcGe" rel="nofollow">http://toxicfree.me/YVFcGe</a> Firefox, Safari, & Chrome are fine but a large population of my target audience uses IE. Thanks for letting me know if this is theme related or not. - Lindsey Nick on "Iconbox Retina Image Replacement" http://www.kriesi.at/support/topic/iconbox-retina-image-replacement#post-99182 Sun, 03 Mar 2013 00:44:35 +0000 Nick 99182@http://www.kriesi.at/support/ Hi, There is a plugin that does that quite easily with shortcodes <a href="http://wordpress.org/extend/plugins/wp-retina-2x/" rel="nofollow">http://wordpress.org/extend/plugins/wp-retina-2x/</a> Your media query looks alright to me but I don't like how you are targeting , please try this instead as it has the same styling as the smoothie icon on your home page. <pre><code>#top span.smoothie{ background: url("http://www.toxicfreechallenge.com/wp-content/themes/propulsion/images/icons/iconbox/fruits@2x.png") no-repeat scroll 0 0 transparent; display: inline; height: 149px; left: 0; padding-left: 60px; padding-top: 20px; padding-bottom: 10px; width: 48px; }</code></pre> Thanks, Nick Lindsey on "Iconbox Retina Image Replacement" http://www.kriesi.at/support/topic/iconbox-retina-image-replacement#post-99068 Fri, 01 Mar 2013 20:30:00 +0000 Lindsey 99068@http://www.kriesi.at/support/ Hi Team! I'm trying to target an icon box to replace it's image with retina in my media query. I've tried targeting an icon box a few different ways: @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) { .iconbox_icon.fruits{ background:url("../images/icons/iconbox/fruits@2x.png") no-repeat; background-size: 50%; padding-top: 20px !important; } .iconbox span.fruits { background:url("../images/icons/iconbox/fruits@2x.png") no-repeat; background-size: 50%; padding-top: 20px !important; } .iconbox.iconbox_icon.fruits { background:url("../images/icons/iconbox/fruits@2x.png") no-repeat; background-size: 50%; padding-top: 20px !important; } .iconbox.iconbox_icon span.fruits { background:url("../images/icons/iconbox/fruits@2x.png") no-repeat; background-size: 50%; padding-top: 20px !important; } .iconbox span.fruits { background:url("../images/icons/iconbox/fruits@2x.png") no-repeat; background-size: 50%; padding-top: 20px !important; } .iconbox_icon span.fruits { background:url("../images/icons/iconbox/fruits@2x.png") no-repeat; background-size: 50%; padding-top: 20px !important; } } I have even tried .iconbox span.fruits[icon="fruits.png"] (just an idea) but to no avail. I'd really like to have retina for each icon box, as I have several icons, not just a fruits icon but several others. How do you suggest to target these? Thank you kindly!! - Lindsey Nick on "Replacing logo with Retina Logo" http://www.kriesi.at/support/topic/replacing-logo-with-retina-logo#post-97700 Wed, 20 Feb 2013 18:48:27 +0000 Nick 97700@http://www.kriesi.at/support/ Hi, hmmmmm 3 seconds? thats not good. Why don't you encode the image to base64 and stick it in the css , you may have a large css file, but mobiles load css instantly unlike images. It would shave 90% on your load time. Here is the url to the converter <a href="http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/" rel="nofollow">http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/</a> Good luck! Nick Lindsey on "Replacing logo with Retina Logo" http://www.kriesi.at/support/topic/replacing-logo-with-retina-logo#post-97691 Wed, 20 Feb 2013 18:13:02 +0000 Lindsey 97691@http://www.kriesi.at/support/ Thanks Nick, With the Propulsion theme, if I remove my image from the Theme Options, the Propulsion image is the default logo, and displays with my logo as well. After installing WP Retina2X, I was able to remove media queries completely for the logo. All I needed to do was rename the Propulsion logo as p-logo.png and drop in my original size image in named logo.png, as well as a high res version as <a href="mailto:logo@2x.png">logo@2x.png</a>. The high res version loads about 3 seconds after the original version on the iPhone. Thank you so much for all of your help and kindness!! Sincerely, Lindsey Nick on "Replacing logo with Retina Logo" http://www.kriesi.at/support/topic/replacing-logo-with-retina-logo#post-97551 Wed, 20 Feb 2013 01:35:18 +0000 Nick 97551@http://www.kriesi.at/support/ Hi, You could do it like this ... below is pseudo code to give you an idea. <pre><code>#top h1.logo { background-image: url(logo-non-retina.png) !important; } @media ...al the media queries from above only screen and ( min-resolution: 2dppx) { #top h1.logo { background: url("/retina.png") !important; } }</code></pre> and for the html <pre><code><h1 id="logo" class="logo"> <a href="abc.com">Website name</a> </h1></code></pre> Ref: <a href="http://stackoverflow.com/questions/665037/replacing-h1-text-with-a-logo-image-best-method-for-seo-and-accessibility" rel="nofollow">http://stackoverflow.com/questions/665037/replacing-h1-text-with-a-logo-image-best-method-for-seo-and-accessibility</a> Thanks, Nick Lindsey on "Replacing logo with Retina Logo" http://www.kriesi.at/support/topic/replacing-logo-with-retina-logo#post-97543 Tue, 19 Feb 2013 23:48:47 +0000 Lindsey 97543@http://www.kriesi.at/support/ Hello, This is a great article and resource you have given me. I will conquer this! I appreciate your help. Yes, I hard-coded the logo in the Theme Options inside WordPress. I wonder if I should replace it with the high-res one, and just change the background size via CSS in my mobile media query instead of swapping it out. I think that would work. I will try this and also reinstall the plugin and I will update you soon. Thank you so kindly, Nick! - Lindsey Nick on "Replacing logo with Retina Logo" http://www.kriesi.at/support/topic/replacing-logo-with-retina-logo#post-97540 Tue, 19 Feb 2013 23:04:43 +0000 Nick 97540@http://www.kriesi.at/support/ Hi, Hehe. I got the css I posted from the same website. Yet it didn't say to remove the original, it just says to add the variation. You can also look at this <a href="http://www.brettjankord.com/2012/11/28/cross-browser-retinahigh-resolution-media-queries/" rel="nofollow">http://www.brettjankord.com/2012/11/28/cross-browser-retinahigh-resolution-media-queries/</a> You have your main logo hardcoded in the html so it will be displayed no matter what <pre><code><h1 class="logo"><a href="http://www.toxicfreechallenge.com/"><img src="http://toxicfreechallenge.com/wp-content/uploads/2011/12/TFC-logo-114x143.png" alt=""></a></h1></code></pre> You need to have both the retina and the original image inside the css and to show one or the other class based on the media query. Please look here for example <a href="http://www.sitepoint.com/css-techniques-for-retina-displays/" rel="nofollow">http://www.sitepoint.com/css-techniques-for-retina-displays/</a> I would still use <a href="http://wordpress.org/extend/plugins/wp-retina-2x/faq/" rel="nofollow">http://wordpress.org/extend/plugins/wp-retina-2x/faq/</a> ... the developer guarantees it and even offers free support. can't beat that. Thanks, Nick Lindsey on "Replacing logo with Retina Logo" http://www.kriesi.at/support/topic/replacing-logo-with-retina-logo#post-97513 Tue, 19 Feb 2013 20:26:18 +0000 Lindsey 97513@http://www.kriesi.at/support/ Thanks Nick, I've updated my CSS and checked my Firefox app on my iPhone, and they look the same. I've read articles on using both types of moz, one from css-tricks.com even says "The super weird min--moz-device-pixel-ratio is probably a bug, might wanna put in -moz-min-device-pixel-ratio also in case they fix it but leave it prefixed". In any event, I have changed mine to your suggestion - thank you so much, although my icons are appearing the same. Regarding the image replacement for the logo, I have it in my media query as such: @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) { h1.logo a { background: url("/wp-content/uploads/2011/12/TFC-logo-114x143@2x.png") no-repeat top left; background-size: 60%; } } The image shows up and looks great, except it's peeking out from behind my original logo. I can't display:none on the original logo because they have the same selector. I'm not sure why the original logo isn't disappearing. I have saved my CSS so you should be able to see it on my home page <a href="http://www.toxicfreechallenge.com" rel="nofollow">http://www.toxicfreechallenge.com</a>. This is a very interesting dilemma. Thank you for your help!! - Lindsey Nick on "Replacing logo with Retina Logo" http://www.kriesi.at/support/topic/replacing-logo-with-retina-logo#post-97505 Tue, 19 Feb 2013 19:37:00 +0000 Nick 97505@http://www.kriesi.at/support/ Hi, Please try this <pre><code>@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) { /* Retina-specific stuff here */ }</code></pre> Your line 2 is not correct. min moz device ... not ... min moz min device Thanks, Nick Lindsey on "Replacing logo with Retina Logo" http://www.kriesi.at/support/topic/replacing-logo-with-retina-logo#post-97497 Tue, 19 Feb 2013 19:10:35 +0000 Lindsey 97497@http://www.kriesi.at/support/ Thanks Nick, I'm just using my own layout.css document with these media queries, which are successful with all my other images, so I'm not sure why the logo isn't updating: @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-min-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: 2dppx) { } I had the Retina2x plugin but it wasn't working, so I just created my own media queries and uploaded <a href="mailto:icon@2x.png">icon@2x.png</a> for all my images and icon and coded it out with the above media query, and everything except the logo worked. Retina2x documentation states "The plugin can transform the images that go through the WordPress API and the 'Image Sizes' properly. Themes often uses a one-time customized size for the logo, and for that reason the image wouldn't be taken care of by the plugin. The easiest way to go around this is to create the Retina image by yourself. For example, if you are logo is 200x100 and named 'logo.png', upload a 400x200 version of that logo named 'logo@2x.png' next to the other one. It should them work immediately." I did that, but it still didn't replace it, so I had no need for the plugin and deactivated and deleted it. So with my own code, my images are fine and retina images are replacing, but the logo isn't. Nick on "Replacing logo with Retina Logo" http://www.kriesi.at/support/topic/replacing-logo-with-retina-logo#post-97487 Tue, 19 Feb 2013 18:33:32 +0000 Nick 97487@http://www.kriesi.at/support/ Hi, What are you using (code) to display retina? Have you tried this <a href="http://conditionizr.com/" rel="nofollow">http://conditionizr.com/</a> or <a href="http://wordpress.org/extend/plugins/wp-retina-2x/" rel="nofollow">http://wordpress.org/extend/plugins/wp-retina-2x/</a> Thanks, Nick Lindsey on "Replacing logo with Retina Logo" http://www.kriesi.at/support/topic/replacing-logo-with-retina-logo#post-97321 Mon, 18 Feb 2013 20:33:01 +0000 Lindsey 97321@http://www.kriesi.at/support/ Hi Team, I've updated all my site's icons and images with retina and all is well on mobile. I'd like to now replace my logo with a retina image. This is what is working for me for site wide images in my media queries: #list .icon { background: url("../images/icon@2x.png") no-repeat top left; background-size: 60%; } However, when I try to implement retina replacement for my logo, my retina image shows up under the logo and to the left, so instead of replacing the original logo on mobile devices, there are two images there. I have tried the following and they are showing up but the original image isn't going away: h1.logo { background: url("../images/TFC-logo-912x1144@2x.png") no-repeat top left; background-size: 60%; } h1.logo a { background: url("../images/TFC-logo-912x1144@2x.png") no-repeat top left; background-size: 60%; } h1.logo a img { background: url("../images/TFC-logo-912x1144@2x.png") no-repeat top left; background-size: 60%; } I've done this for other sites when hand-coding, but this is my first time attempting with a theme and I'm not sure how to correct this in the php. Thank you for your help! - Lindsey