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’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>