SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru laflair13's Avatar
    Join Date
    Nov 2004
    Location
    TN
    Posts
    629
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    Is there anyway I can make this work with gmail?

    Here is my code.

    CSS
    Code:
    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
    Code:
       <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">DONT WANT THIS ON DESKTOP OR GMAIL</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" >DONT WANT THIS ON MOBILE</p>
                                      </td>
                                    </tr>
                                </table>
    Thanks In Advance

    David

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,330
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    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:

    http://www.campaignmonitor.com/css/

  3. #3
    SitePoint Guru laflair13's Avatar
    Join Date
    Nov 2004
    Location
    TN
    Posts
    629
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I understand that, but I see so many others doing it. Wonder how they are making it work.
    Thanks In Advance

    David

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    It may also be worth setting the following properties on the element you want to hide:
    Code:
    height:0;width:0;overflow:hidden;opacity:0;position:absolute;left:-999em;display:none;visibility:hidden;
    You can undo them with:

    Code:
    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.

  6. #6
    SitePoint Guru laflair13's Avatar
    Join Date
    Nov 2004
    Location
    TN
    Posts
    629
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for the information.
    Thanks In Advance

    David


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •