media queries and Android

Hello,

I've built and am testing an email using media queries (max-device-width: 480px). All is well on iPhone but just done some testing on an Android phone (HTC Desire HD with screen width of 480px), and it's loading the desktop version.

Happy to post code, but any ideas / experiences of this?

thanks,

James.

roshodgekiss roshodgekiss, 5 years ago

Hi jamesashcroft, are you testing in the Android Gmail client, or default Mail client? The former has inherited regular Gmail's shonky CSS support and as a result, will not work with @media queries. The desktop version is what will display instead

The latter should be fine - if this is what you're using to test, feel free to post your code here and we'll give it a look :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
jamesashcroft, 5 years ago

thanks, here you go

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>VeriSign</title>
    <style>
    a:hover {
        text-decoration: underline !important;
    }
    
    a.grey {
        color:#414042;
        }
    
    a.white {
        color:#ffffff;    
    }
    
    .yellow {
        color:#ffc20e;
    }
    
    .footer {
        color:#a5a9ad;
        }
    @media only screen and (max-device-width: 480px) {
        table[class="table"], td[class="cell"], img[class="image"] {
              width: 325px !important;
         }

        td[class="welcome"], img[class="welcome"], td[class="download"], img[class="download"], td[class="section"], img[class="section"] {
              width: 275px !important;
         }
         table[class="hide"], img[class="hide"], td[class="hide"] {
              display: none !important;
         }
    }
    </style>
</head>

<body bgcolor="#e4e4e4" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" style="-webkit-font-smoothing: antialiased;width:100% !important;background:#e7e7e7;-webkit-text-size-adjust:none;">
    
<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#e4e4e4">
<tr>
    <td bgcolor="#e4e4e4" width="100%">

    <table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="table">
    <tr>
        <td width="600" class="cell">
        
           
        <!-- masthead -->
        <table width="600" cellpadding="0" cellspacing="0" border="0" class="table" bgcolor="#ffffff">
        <tr>
          <td colspan="3" bgcolor="#e4e4e4" align="center" class="hide">
            <table width="600" border="0" cellspacing="0" cellpadding="10" class="hide">
              <tr>
                <td align="center" style="color:#414042;font-family:Arial, Helvetica, sans-serif;font-size:11px;line-height:1.2;">Having trouble viewing this email? <a href="#" class="grey" style="color:#414042;">View it in your browser.</a></td>
              </tr>
            </table>
          </td>
          </tr>
        <tr>
            <td width="325">
                <img src="images/symantec-logo.jpg" style="display:block;" width="325" height="62" alt="Now from Symantec | VeriSign Authentication Services"></td>
            <td align="right" width="250" class="hide" style="color:#8b2346;font-size:14px;font-family:Arial, Helvetica, sans-serif;font-weight:bold;">&nbsp;</td>
            <td width="25" class="hide">
                <img border="0" src="images/spacer.gif" style="display:block;" width="25" height="25">
            </td>
        </tr>
        </table>
        
        <!-- welcome-->         
        <table width="600" cellpadding="0" cellspacing="0" border="0" class="table" bgcolor="#ffc20e">
             <tr>
               <td bgcolor="#ffc20e" width="25"><img border="0" src="images/shadow.jpg" style="display:block;" width="25" height="10"></td>
            <td bgcolor="#ffc20e" width="550" class="welcome"><img border="0" src="images/shadow.jpg" style="display:block;" width="550" height="10" class="welcome"></td>
            <td bgcolor="#ffc20e" width="25"><img border="0" src="images/shadow.jpg" style="display:block;" width="25" height="10"></td>
             </tr>
          <tr>
              <td bgcolor="#ffc20e" width="25"><img border="0" src="images/spacer.gif" style="display:block;" width="25" height="25"></td>
            <td bgcolor="#ffc20e" width="550" class="welcome" style="color:#ffffff;font-family:Arial, Helvetica, sans-serif;font-size:16px;font-weight:bold;line-height:1.2;">Thank you</td>
            <td bgcolor="#ffc20e" width="25"><img border="0" src="images/spacer.gif" style="display:block;" width="25" height="25"></td>
          </tr>
          <tr>
               <td bgcolor="#ffc20e" width="25"><img border="0" src="images/spacer.gif" style="display:block;" width="25" height="10"></td>
            <td bgcolor="#ffc20e" width="550" class="welcome"><img border="0" src="images/spacer.gif" style="display:block;" width="550" height="10" class="welcome"></td>
            <td bgcolor="#ffc20e" width="25"><img border="0" src="images/spacer.gif" style="display:block;" width="25" height="10"></td>
             </tr>
        </table>

        
        <!-- header -->
           <table width="600" cellpadding="0" cellspacing="0" border="0" class="table" bgcolor="#ffffff">
             <tr>
            <td bgcolor="#ffffff" width="25">                      
             
                <img border="0" src="images/spacer.gif" style="display:block;" width="25" height="25">
                
            </td>
            <td width="275" align="left" bgcolor="#ffffff" class="" style="color:#8b2346;font-family:Arial, Helvetica, sans-serif;font-size:25px;font-weight:bold;">                      
                 <br>
                CHOOSING A CLOUD HOSTING PROVIDER WITH CONFIDENCE
                <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
                  <tr>
                    <td bgcolor="#ffffff">&nbsp;</td>
                  </tr>
                  <tr>
                    <td bgcolor="#ffffff" align="center"><a href="#" title="Download Whitepaper" target="_blank"><img src="images/btn-download1.jpg" style="display:block;" alt="Download Whitepaper" width="275" height="40" border="0"></a></td>
                  </tr>
                </table>
                
            
            </td>
            <td bgcolor="#ffffff" width="25" class="">                      
             
                <img border="0" src="images/spacer.gif" style="display:block;" width="25" height="25">
                
            </td>
            <td width="275" valign="top" bgcolor="#ffffff" class="hide">                      
             
                <img src="images/hero.jpg" style="display:block;" width="275" height="215" alt="">
                
            </td>
        </tr>
           <tr>
               <td bgcolor="#ffffff" width="25"><img border="0" src="images/spacer.gif" style="display:block;" width="25" height="25"></td>
            <td bgcolor="#ffffff" width="275"><img border="0" src="images/spacer.gif" style="display:block;" width="275" height="25"></td>
            <td bgcolor="#ffffff" width="25"><img border="0" src="images/spacer.gif" style="display:block;" width="25" height="25"></td>
            <td bgcolor="#ffffff" width="275" class="hide"><img border="0" src="images/spacer.gif" style="display:block;" width="275" height="25"></td>
             </tr>
        </table>
        
        <!-- whitepaper -->
        <table width="600" cellpadding="25" cellspacing="0" border="0" class="table" bgcolor="#414143">
        <tr>
            <td bgcolor="#414143" width="600" class="cell" style="color:#ffffff;font-family:Arial, Helvetica, sans-serif;font-size:14px;font-weight:bold;line-height:1.2;">                      
             
                <span class="yellow">Thank you for your enquiry.</span> <a href="#" class="white" style="color:#ffffff;">Download the Choosing A Cloud Hosting Provider With Confidence white paper</a> directly to your computer now.
            
            </td>
        </tr>
        </table>
        
        <!-- footer -->
        <table width="600" cellpadding="25" cellspacing="0" border="0" class="table" bgcolor="#f9f9f9">
        <tr>
          <td align="right" bgcolor="#f9f9f9" class="cell" style="color:#a5a9ad;font-family:Arial, Helvetica, sans-serif;font-size:12px;line-height:1.2;"><img src="images/verisign-logo.jpg" width="112" height="57" alt="VeriSign Trusted&trade;"></td>
          </tr>
        <tr>
            <td bgcolor="#f9f9f9" width="600" class="cell" style="color:#a5a9ad;font-family:Arial, Helvetica, sans-serif;font-size:12px;line-height:1.2;">                      
             
                You are now scheduled to receive periodic e-mail updates from Symantec. To unsubscribe, please <a href="http://www.verisign.co.uk/compref" style="color:#a5a9ad;">visit our website</a> and update your communication preferences and user profile.<br><br>                
                Copyright &copy; 2011 Symantec Corporation. All rights reserved. Symantec, the Symantec Logo, and the Checkmark Logo are trademarks or registered trademarks of Symantec Corporation or its affiliates in the U.S. and other countries. VeriSign, VeriSign Trust and other related marks are the trademarks or registered trademarks of VeriSign, Inc. or its affiliates or subsidiaries in the U.S. and other countries and licensed to Symantec Corporation. Other names may be trademarks of their respective owners.
                <br><br>
                Symantec (UK) Limited<br>
                350 Brook Drive, GreenPark, Reading Berkshire RG2 6UH, UK
            
            </td>
        </tr>
        </table>
        
        </td>
    </tr>
    </table>
</td>
</tr>
</table>                               

</body>
</html>

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098