Google mail displaying content double

I am trying to make my email for mobile and desktop. I made it where text shows up above a logo on mobile, but below it on desktop. My issue is that it is showing in both places in gmail on desktop.

As seen here. (the names)

Is there anyway I can make this work with gmail?

Here is my code.

CSS

p.hide { color: #ffffff; }
	
	@media only screen and (max-device-width: 640px)  {
					body[yahoo] .deviceWidth {width:440px!important; padding:0;}	
					body[yahoo] .center {text-align: center!important;}
	 
			}
			
	@media only screen and (max-device-width: 479px) {
					body[yahoo] .deviceWidth {width:320px!important; padding:0;}	
					body[yahoo] .center {text-align: center!important;}
					 
			}
			
	@media only screen and (max-device-width: 479px) {
					#mobile {display:block; color: #000000}
					#desktop {display:none;mso-hide: all;}
					
					
			}
 
/* Special Rules for Tablets */
	@media only screen and (min-device-width: 480px) {
					#mobile {display:none;mso-hide: all;}
					#desktop {display:block; color: #000000 }
					
    }
			}
			

HTML

   <table align="left" width="51%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
                                <tr>
                                    <td style="padding-top:20px">
						<p style="font-size: 14px; font-style:italic; color: #959595; font-weight: normal; text-align: left; font-family: Helvetica, sans-serif; line-height: 24px;">We&#8217;ve had substantial referral growth since fully implementing PlayMaker. As we are able to monitor performance more accurately and measure it, we have seen referrals grow at least 6-and-a-half percent higher than last year.</p>
                        <p id="mobile" style="font-family:Helvetica, sans-serif; font-size:11px; line-height:15px; mso-hide:all" class="hide">[B]DONT WANT THIS ON DESKTOP OR GMAIL[/B]</p>
                      	
                                        
                                    </td>
                                </tr>
                            </table> 
                            
                              <table align="center" width="5%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
                                <tr>
                                    <td valign="top" align="left" class="center" style="padding-top:5px">
                                           
                                    </td>
                                </tr>
                            </table>
                            <table align="right" width="44%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
                                <tr>
                                    <td valign="top" align="left" class="center" style="padding-top:5px">

                                            <img width="215" src="3hc-logo.png" alt="" border="0" style="border-radius: 4px; width: 150px; display: block;" class="deviceWidth"/>
                                            <p id="desktop" style="font-family:Helvetica, sans-serif; font-size:11px; line-height:15px" >[B]DONT WANT THIS ON MOBILE[/B]</p>
                                  </td>
                                </tr>
                            </table>  

You have to remember that email design is not web design. Most email clients are in the stone age when it comes to web standards. Hardly any of them support @media. Look at the top line of this CSS support chart:

I understand that, but I see so many others doing it. Wonder how they are making it work.

Gmail doesn’t understand the media queries so only use the media queries for mobile. Don’t have media queries for email clients at all. Just have normal rules (preferably inlined in the tags themselves). Then you just overwrite the inline rules for mobile via the media queries and use !important. See the template examples on the campaign monitor site as they have a lot of this built in.

It may also be worth setting the following properties on the element you want to hide:


height:0;width:0;overflow:hidden;opacity:0;position:absolute;left:-999em;display:none;visibility:hidden;

You can undo them with:


height:auto;width:auto;overflow:visible;opacity:1;position:static;left:auto;display:block;visibility:visible

If the element has magirn padding and borders then remove them also and then put them back. However as I said above only put the mobile styles in the media query. All desktop/email client rules should be as per normal and preferably inlined in the tags themselves.

Hopefully one of those will work to hide the element.

Thank you for the information.