Images and Media Queries failing miserably on iPhone!

So, I'm in the midst of putting together a lovely 'responsive' template...so far it all works beautifully in Safari, I knew this wouldn't be the end of it though so I loaded it up in CM to send out some tests. Sent it to myself on my work address and Gmail.

On both Gmail and Apple Mail on my desktop...it looks great, just standard full width layout...

But when I go to view it on my mobile (again through iPhone Mail and Gmail in browser) it's having some problems...

In Mail it's not loading any of the images...is this normal? It also looks like it's not registering any of the media queries (increased text sizes etc).

In Gmail it's loading all the images, but it's the same full-width edition but tiny, as usual, no sign of the media queries coming into play at all.

Am I missing something here, or do the media queries only come into play if the user clicks through to view the web version?

Sigh!

JohnP JohnP, 4 years ago

I can't comment about the images or iPhone mail client, but can confirm that media queries don't work in Gmail because Gmail strips out <style> declarations.

All CSS needs to be inline for Gmail and because you can't inline media queries, they are not supported.

graphicgoose graphicgoose, 4 years ago

Thanks! And I read that iPhone Mail automatically is set to not download images, so that's fine. But....iPhone Mail not responding to media queries?? What was the point in all this if that's the case!

Can anyone confirm?

roshodgekiss roshodgekiss, 4 years ago

Hi graphicgoose, to clarify two things here:

- iPhone Mail does automatically download images, unless you change this inyour preferences. We've had image load issues reported amongst customers using iOS 6 Mail and I'm starting to suspect it may have something to do with file sizes. I'll investigate further and keep you posted on this one.
- iPhone Mail should respond to media queries. Could you kindly post your code here for us to take a look at? Chances are, there's something in the declaration that is excluding iPhone Mail.

Thanks graphicgoose - it's very exciting that you're putting together a responsive template, so I'd be happy to get this working for you.


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

Ack! Yes, I can. I'll do that. It's messy though, and please excuse my terrible class name conventions. It's a work in progress. :p

graphicgoose graphicgoose, 4 years ago

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="style.css" />

<title>Mailer Template</title>

</head>
<body>
<table id="container" width"600" cellpadding="0" cellspacing="0">
  <!-- HEADER -->

    <tr>
    <td>
    <table id="headertable" cellpadding="0" cellspacing="0">
    <tr>
        <td id="headerbarleft" width="20" style="background-color:#fff;">&nbsp;</td>
        <td id="headerbar" width="560" style="background-color:#fff;">
            <table cellpadding="0" cellspacing="0">
            <tr>
                <td width="156" id="webversion" valign="top"><webversion><img src="images/button_web.jpg" width="156" height="25" style="display:block;" border="0"/ alt="view webversion"></webversion></td>
                <td width="270">&nbsp;</td>
                <td width="134">
                <a href="http://www.twitter.com/analogcreative"><img class="socialbuttons" src="images/button_twitter.jpg" border="0" style="margin-right:5px;" alt="analog twitter"/></a>
                <a href="http://www.facebook.com/analogcreative"><img class="socialbuttons" src="images/button_facebook.jpg" border="0" style="margin-right:5px;" alt="analog facebook"/></a>
                <a href="http://www.last.fm/user/analogcreative"><img class="socialbuttons" src="images/button_lastfm.jpg" border="0" style="margin-right:5px;" alt="analog lastfm"/></a>
                <a href="http://www.linkedin.com/company/1833571?goback=%2Epiv_I327838833*460_4957443_hMGi_*1_*1&trk=prof-0-ovw-curr_pos"><img class="socialbuttons" src="images/button_linkedin.jpg" border="0" alt="analog linkedin"/></a>
                </td>
                </tr>
            </table>
        </td>
        <td id="headerbarright" width="20" style="background-color:#fff;">&nbsp;</td>
    </tr>
    </table>
    </td></tr>
    <tr>
        <td class="headershadowcell" border="0"><img src="images/barborder.jpg" width="100%"/></td>
    </tr>
    
    <!-- LOGO -->
    
    <tr><td><table id="logotable" cellpadding="0" cellspacing="0">
    <tr>
        <td id="logobarleft" width="20">&nbsp;</td>
        <td id="logobar" width="560">
            <div id="logobox"><img id="logo" src="images/logo.jpg" width="280" height="73" border="0" /></div>
        </td>
        <td id="logobarright" width="20">&nbsp;</td>
    </tr>
    
    <!-- INTRO BOX -->
    
        <tr>
        <td id="introimgleft" width="20">&nbsp;</td>
        <td id="introimgcenter" width="560" style="background-color:#fff;">
        <div id="introimgbox"><img id="introimg" src="images/introimg.jpg" width="560" height="94" border="0" alt="butterfly header" /></div>
        </td>
        <td id="introimgright" width="20">&nbsp;</td>
    </tr>
    <tr>
        <td id="introleft" width="20">&nbsp;</td>
        <td id="introcenter" width="560" style="background-color:#fff;">
        <p class="intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu imperdiet mauris. Etiam leo odio, iaculis vel rhoncus nec, sodales id eros. Mauris auctor facilisis.</p>
        <div id="quotebox"><img id="quote" src="images/quoteimg.jpg" width="500" height="84" border="0" alt="quote from arthur c clarke" /></div>
        </td>
        <td id="introright" width="20">&nbsp;</td>
    </tr>
    
        <!-- SPACER -->  
        <tr>
        <td class="spacerleft" width="20">&nbsp;</td>
        <td class="spacercenter" width="560">&nbsp;
        </td>
        <td class="spacerright" width="20">&nbsp;</td>
    </tr>
        
         
        <!-- NEW WORK -->

        <tr>
        <td id="newworktitleleft" width="20">&nbsp;</td>
        <td id="newworktitlecenter" width="560">
        <div id="newworktitlebox"><img id="newworktitleimg" src="images/newworktitle_640.jpg" width="560" height="34" border="0" style="display:block;"/></div>
        </td>
        <td id="newworktitleright" width="20">&nbsp;</td>
    </tr>
    
    <!-- NEW WORK PIECE -->
    
    <tr>
        <td class="newworkleft" width="20">&nbsp;</td>
        <td class="newworkcenter" width="560" style="background-color:#fff;">
        <div class="newworkphoto"><img class"nwimg" src="images/new_heyerdahl.jpg" width="500" height="200" alt="screenshot of heyerdahl"/></div>
        </td>
        <td class="newworkright" width="20">&nbsp;</td>
    </tr>
    
    <tr>
        <td class="newworkleft" width="20">&nbsp;</td>
        <td class="newworkcenter" width="560" style="background-color:#fff;">
        <p class="main">Type of project // Name of client // <a href="">View Project</a></p>
        <hr />
        </td>
        <td class="newworkright" width="20">&nbsp;</td>
    </tr>
    
    <!-- NEW WORK PIECE -->
    
    <tr>
        <td class="newworkleft" width="20">&nbsp;</td>
        <td class="newworkcenter" width="560" style="background-color:#fff;">
        <div class="newworkphoto"><img class"nwimg" src="images/new_heyerdahl.jpg" width="500" height="200" alt="screenshot of heyerdahl" /></div>
        </td>
        <td class="newworkright" width="20">&nbsp;</td>
    </tr>
    
    <tr>
        <td class="newworkleft" width="20">&nbsp;</td>
        <td class="newworkcenter" width="560" style="background-color:#fff;">
        <p class="main">Type of project // Name of client // <a href="">View Project</a></p>
        <hr />
        </td>
        <td class="newworkright" width="20">&nbsp;</td>
    </tr>
    
    <!-- VIEW MORE LINK -->
    
    <tr>
        <td class="newworkleft" width="20">&nbsp;</td>
        <td class="newworkcenter" width="560" style="background-color:#fff;">
        <div class="newworkbutton"><a href=""><img src="images/button_work.jpg" width="250" height="35" border="0" alt="view more work link"/></a></div>
        </td>
        <td class="newworkright" width="20">&nbsp;</td>
    </tr>
    
    
    <!-- SPACER -->  
        <tr>
        <td class="spacerleft" width="20">&nbsp;</td>
        <td class="spacercenter" width="560">&nbsp;
        </td>
        <td class="spacerright" width="20">&nbsp;</td>
    </tr>
        
         
        <!-- VIP FEATURE -->

        <tr>
        <td id="viptitleleft" width="20">&nbsp;</td>
        <td id="viptitlecenter" width="560">
        <div id="viptitlebox"><img id="viptitleimg" src="images/viptitle_640.jpg" width="560" height="34" border="0" style="display:block;"/></div>
        </td>
        <td id="viptitleright" width="20">&nbsp;</td>
    </tr>
    
    <!-- VIP FEATURE CONTENT -->
    
    <tr>
        <td class="vipleft" width="20">&nbsp;</td>
        <td class="vipcenter" width="560" style="background-color:#fff;">
        <div class="vipphoto"><img class"vipimg" src="images/vip_redeye.jpg" width="500" height="280" alt="screenshot of heyerdahl" /></div>
        </td>
        <td class="vipright" width="20">&nbsp;</td>
    </tr>
    
    <tr>
        <td class="vipleft" width="20">&nbsp;</td>
        <td class="vipcenter" width="560" style="background-color:#fff;">
        <p class="mainsmall">Now that there is the Tec-9, a crappy spray gun from South Miami. This gun is advertised as the most popular gun in American crime. Do you believe that shit? It actually says that in the little book that comes with it: the most popular gun in American crime. Like they're actually proud of that shit. </p>
        <hr />
        </td>
        <td class="vipright" width="20">&nbsp;</td>
    </tr>
    
        <!-- VIEW PROJECT LINK -->
    
    <tr>
        <td class="vipleft" width="20">&nbsp;</td>
        <td class="vipcenter" width="560" style="background-color:#fff;">
        <div class="vipbutton"><a href=""><img src="images/button_project.jpg" width="250" height="35" border="0" alt="view project link" /></a></div>
        </td>
        <td class="vipright" width="20">&nbsp;</td>
    </tr>
    
    
    <!-- SPACER -->  
        <tr>
        <td class="spacerleft" width="20">&nbsp;</td>
        <td class="spacercenter" width="560">&nbsp;
        </td>
        <td class="spacerright" width="20">&nbsp;</td>
    </tr>
        
         
        <!-- HIRING FEATURE -->

        <tr>
        <td id="hiringtitleleft" width="20">&nbsp;</td>
        <td id="hiringtitlecenter" width="560">
        <div id="hiringtitlebox"><img id="hiringtitleimg" src="images/hiringtitle_640.jpg" width="560" height="34" border="0" style="display:block;" /></div>
        </td>
        <td id="hiringtitleright" width="20">&nbsp;</td>
    </tr>
    
    <!-- HIRING CONTENT -->
    
    <tr>
        <td class="hiringleft" width="20">&nbsp;</td>
        <td class="hiringcenter" width="560" style="background-color:#fff;">
        <div class="hiringphoto"><img class"hiringimg" src="images/hiring_developer.jpg" width="500" height="180" alt="picture of geeky victorian"/></div>
        </td>
        <td class="hiringright" width="20">&nbsp;</td>
    </tr>
    
    <tr>
        <td class="hiringleft" width="20">&nbsp;</td>
        <td class="hiringcenter" width="560" style="background-color:#fff;">
        <p class="mainsmall">Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house:</p>
        <ul class="hiring">
            <li>unbeatable ninja spelling skills</li>
            <li>can shoot a fish in the eye with a bow and arrow from 200 ft</li>
            <li>can recite all the lyrics from nirvana - nevermind...backward</li>
            <li>and a few more things</li>
        </ul>
        <hr />
        </td>
        <td class="hiringright" width="20">&nbsp;</td>
    </tr>
    
        <!-- HIRING LINK -->
    
    <tr>
        <td class="hiringleft" width="20">&nbsp;</td>
        <td class="hiringcenter" width="560" style="background-color:#fff;">
        <div class="hiringbutton"><a href=""><img src="images/button_hiring.jpg" width="250" height="35" border="0" alt="more information on job link"/></a></div>
        </td>
        <td class="hiringright" width="20">&nbsp;</td>
    </tr>
    
    
    <!-- SPACER -->  
        <tr>
        <td class="spacerleft" width="20">&nbsp;</td>
        <td class="spacercenter" width="560">&nbsp;
        </td>
        <td class="spacerright" width="20">&nbsp;</td>
    </tr>
        
         
        <!-- BLOG FEATURE -->

        <tr>
        <td id="blogtitleleft" width="20">&nbsp;</td>
        <td id="blogtitlecenter" width="560">
        <div id="blogtitlebox"><img id="viptitleimg" src="images/blogtitle_640.jpg" width="560" height="34" border="0" style="display:block;" /></div>
        </td>
        <td id="blogtitleright" width="20">&nbsp;</td>
    </tr>
    
        <!-- SPACER -->  
        <tr>
        <td class="spacerleft" width="20">&nbsp;</td>
        <td class="spacercenter" width="560" bgcolor="#FFFFFF">&nbsp;
        </td>
        <td class="spacerright" width="20">&nbsp;</td>
    </tr>
    
    <!-- BLOG FEATURE CONTENT -->
    <tr>
        <td class="blogleft" width="20">&nbsp;</td>
        <td class="blogcenter" width="560" style="background-color:#fff;">
        <p class="mainsmall">Lebowski ipsum nice marmot. Dolor sit amet, consectetur adipiscing elit praesent ac magna justo pellentesque. Over the line! Ac lectus quis elit blandit fringilla a ut turpis praesent felis. I'm not Mr. Lebowski; you're Mr. Lebowski.</p>
        </td>
        <td class="blogright" width="20">&nbsp;</td>
    </tr>
    
    <tr>
        <td class="blogleft" width="20">&nbsp;</td>
        <td class="blogcenter" width="560" style="background-color:#fff;">
        <div class="blogphoto"><img class"blogimg" src="images/blog_placeholder.jpg" width="500" height="265" alt="photo of royal teeth" /></div>
        </td>
        <td class="blogright" width="20">&nbsp;</td>
    </tr>
    
    <tr>
        <td class="blogleft" width="20">&nbsp;</td>
        <td class="blogcenter" width="560" style="background-color:#fff;">
        <p class="mainsmall">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla euismod vestibulum ipsum id mattis. Morbi eu nisl nec augue placerat lobortis. </p>
        <hr />
        </td>
        <td class="blogright" width="20">&nbsp;</td>
    </tr>
    
        <!--BLOG READ MORE LINK -->
    
    <tr>
        <td class="blogleft" width="20">&nbsp;</td>
        <td class="blogcenter" width="560" style="background-color:#fff;">
        <div class="blogbutton"><a href=""><img src="images/button_blog.jpg" width="250" height="35" border="0" alt="read the rest of blog link" /></a></div>
        </td>
        <td class="blogright" width="20">&nbsp;</td>
    </tr>
    
     <!-- SPACER -->  
        <tr>
        <td class="spacerleft" width="20">&nbsp;</td>
        <td class="spacercenter" width="560">&nbsp;
        </td>
        <td class="spacerright" width="20">&nbsp;</td>
    </tr>
    
    
    </table></td></tr>
    
      <!-- FOOTER -->
         <tr>
        <td class="footershadowcell" border="0"><img src="images/barborder2.jpg" width="100%"/></td>
    </tr>
    <tr><td>
    <table class="footertable" cellpadding="0" cellspacing="0">
    <tr>
        <td class="footerbarleft" width="20" style="background-color:#fff;">&nbsp;</td>
        <td class="footerbar" width="560" style="background-color:#d6d6d6;">
            <div id="footeranaloglink"><a href="http://www.analog.la" border="0"><img src="images/button_footer_analog.jpg" width="290" height="25" border="0" alt="visit analog website link" /></a></div>
        </td>
        <td class="footerbarright" width="20" style="background-color:#fff;">&nbsp;</td>
    </tr>
    <tr>
        <td class="footerbarleft" width="20" style="background-color:#fff;">&nbsp;</td>
        <td class="footerbar" width="560" style="background-color:#fff;">
        <table id="footinfo" width="290" cellpadding="0" cellspacing="0">
            <tr>
            <td width="156" valign="top">
            <span class="address"><strong>Analog Creative Inc.</strong><br />
517 Ocean Front Walk<br />
Suite 8<br />
Venice, CA 90291<br />
1-818-284-3639</span>
            </td>
            <td width="134" valign="top">
            <a href="http://www.twitter.com/analogcreative"><img class="socialbuttons2" src="images/button_twitter.jpg" border="0" style="margin-right:5px;" alt="analog twitter"/></a>
                <a href="http://www.facebook.com/analogcreative"><img class="socialbuttons2" src="images/button_facebook.jpg" border="0" style="margin-right:5px;" alt="analog facebook"/></a>
                <a href="http://www.last.fm/user/analogcreative"><img class="socialbuttons2" src="images/button_lastfm.jpg" border="0" style="margin-right:5px;" alt="analog lastfm"/></a>
                <a href="http://www.linkedin.com/company/1833571?goback=%2Epiv_I327838833*460_4957443_hMGi_*1_*1&trk=prof-0-ovw-curr_pos"><img class="socialbuttons2" src="images/button_linkedin.jpg" border="0" alt="analog linkedin"/></a>
            
            </td></tr></table></td>
        <td class="footerbarright" width="20" style="background-color:#fff;">&nbsp;</td>
    </tr>
    <tr>
        <td class="footerbarleft" width="20" style="background-color:#fff;">&nbsp;</td>
        <td class="footerbar" width="560" style="background-color:#d6d6d6;">
            <div id="footerunsublink"><unsubscribe><img src="images/button_footer_unsub.jpg" width="290" height="25" border="0" alt="unsubscribe link" /></unsubscribe></div>
        </td>
        <td class="footerbarright" width="20" style="background-color:#fff;">&nbsp;</td>
    </tr>
    <tr>
        <td class="footerbarleft" width="20" style="background-color:#fff;">&nbsp;</td>
        <td class="footerbar" width="560" style="background-color:#fff;">&nbsp;
            
        </td>
        <td class="footerbarright" width="20" style="background-color:#fff;">&nbsp;</td>
    </tr>
    </table>
    </td></tr>


</table>
</body>
</html>
graphicgoose graphicgoose, 4 years ago

CSS

body {
    background-image:url("images/bg.jpg"); 
    background-color:#f7f7f7;
    margin: 0;
    padding: 0;
    }
    
img {style:display:block;}
    
table#container {
    margin: auto;
    }
    
table#headertable img {
    margin-top:5px;
}

td#logobar {padding:10px 0 60px 0;}

p {
    font-size:12px;
    font-family:"Lucida Grande", sans-serif; 
    padding:15px 30px 15px 30px;
    text-align:center;
    color:#565656;
}

p.main {
    font-size:11px;
    font-family:"Lucida Grande", sans-serif; 
    padding:0px 30px 10px 30px;
    text-align:center;
    text-transform:uppercase;
}

p.mainsmall {
    font-size:11px;
    font-family:"Lucida Grande", sans-serif; 
    padding:0px 30px 10px 30px;
    text-align:center;
}

img#quote {
    padding:0px 30px 25px 30px;
}

.newworkphoto {
    width:100%;
    text-align:center;
}

td.newworkcenter {
    margin:auto 0;
    text-align:center;
}

.newworkphoto img {
    border: 10px solid #f1f1f1;
    width:500px;
    margin-top:10px;
    margin-bottom:10px;
}

.vipphoto {
    width:100%;
    text-align:center;
}

td.vipcenter {
    margin:0 auto;
    text-align:center;
}

.vipphoto img {
    border: 10px solid #f1f1f1;
    width:500px;
    margin-top:10px;
    margin-bottom:10px;
}

.hiringphoto {
    width:100%;
    text-align:center;
}

td.hiringcenter {
    margin:0 auto;
    text-align:center;
}

.hiringphoto img {
    border: 10px solid #f1f1f1;
    width:500px;
    margin-top:10px;
    margin-bottom:10px;
}

.blogphoto {
    width:100%;
    text-align:center;
}

td.blogcenter {
    margin:0 auto;
    text-align:center;
}

.blogphoto img {
    border: 10px solid #f1f1f1;
    width:500px;
    margin-top:10px;
    margin-bottom:10px;
}

hr {
    width:520px;
    height:1px;
    color:#666;
    background-color:#CCC;
    border:0;
}

p.main a {
    text-decoration:none;
    font-weight:bold;
    color:#565656;
}

.newworkbutton img {
    width:250px;
    text-align:center;
    margin: 0px auto 10px auto;
}

.newworkbutton {
    width:250px;
    margin:0 auto;
}

.vipbutton img {
    width:250px;
    text-align:center;
    margin: 0px auto 10px auto;
}

.vipbutton {
    width:250px;
    margin:0 auto;
}

#footeranaloglink {
    width:290px;
    margin:0 auto;
}

#footerunsublink {
    width:290px;
    margin:0 auto;
}

.hiringbutton img {
    width:250px;
    text-align:center;
    margin: 0px auto 10px auto;
}

.hiringbutton {
    width:250px;
    margin:0 auto;
}

.blogbutton img {
    width:250px;
    text-align:center;
    margin: 0px auto 10px auto;
}

.blogbutton {
    width:250px;
    margin:0 auto;
}

ul.hiring {
    font-size:11px;
    font-family:"Lucida Grande", sans-serif; 
    padding:0px 30px 10px 40px;
    text-align:left;
}

span.address {
    text-align:left;
    padding:0;
    font-size:13px;
    font-family:"Lucida Grande", sans-serif; 
    color:#565656;
}

table#footinfo {
    margin:15px auto;
}

td table#footinfo {
    vertical-align:top;
}

.address a {
    color:#565656;
    text-decoration:none;
}

img.socialbuttons {
    width:25px;
    height:25px;
}

img.socialbuttons2 {
    width:25px;
    height:25px;
}

@media only screen and (max-width: 568px) {
   /*table#container { width: 90%; }*/
   table#headertable { width: 100%; !important}
   td#headerbar { width: 93.33333333333333%; background-color:#ffffff; !important}
   #logobar img {margin-left: auto; margin-right: auto; text-align:center; !important}
   #logobox {width:280px; margin:auto; !important}
   td#logobar {padding:10px 0 20px 0; !important}
   #introimgbox {display:none; !important}
   td#introimgcenter {background-image:url(images/introimg_iphone.jpg); height:94px; background-position:center; !important}
   p.intro {font-size:14px; !important}
   #quotebox {display:none; !important}
   #newworktitlebox {display:none; !important}
   td#newworktitlecenter {background-image:url(images/newworktitle_iphone.jpg); background-color:none; height:34px; background-position:center; !important}
   .newworkphoto img {width:90%; height:auto; border: 6px solid #f1f1f1; !important}
   #viptitlebox {display:none; !important}
   td#viptitlecenter {background-image:url(images/viptitle_iphone.jpg); background-color:none; height:34px; background-position:center; !important}
   #blogtitlebox {display:none; !important}
   td#blogtitlecenter {background-image:url(images/blogtitle_iphone.jpg); background-color:none; height:34px; background-position:center; !important}
   .vipphoto img {width:90%; height:auto; border: 6px solid #f1f1f1; !important}
   #hiringtitlebox {display:none; !important}
   td#hiringtitlecenter {background-image:url(images/hiringtitle_iphone.jpg); background-color:none; height:34px; background-position:center; !important}
   .hiringphoto img {width:90%; height:auto; border: 6px solid #f1f1f1; !important}
   .blogphoto img {width:90%; height:auto; border: 6px solid #f1f1f1; !important}
   hr {width:93%; !important}
   p.main {font-size:14px; line-height:20px; !important}
   p.mainsmall {font-size:14px; line-height:20px; !important}
   ul.hiring {font-size:13px; line-height:20px; !important}
   img.socialbuttons {width:33px; height:33px; !important}   
   }
roshodgekiss roshodgekiss, 4 years ago

Thanks graphicgoose - the issue here is the use of an external stylesheet. What's likely happening is that our app is incorrectly handling the media query on import of the template into the app (this is our fault) and thus, not parsing the media query or images therein properly. What I recommend you do is move the entire @media only screen and (max-width: 568px) { ... } section into <style> tags in the <head> of your HTML document. This will likely make all the difference.

Sorry for the trouble here - I'll note this as a bug internally and let you know when we get things sorted out with media queries and external stylesheets. Please let us know how you go :)


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

Ha! Thanks! I'm kind of relieved that it's a small issue. I'll try that in the morning and see how it fairs.

As usual, thank you very much for your time! :)

roshodgekiss roshodgekiss, 4 years ago

You're very welcome, graphicgoose - I hope we have better success with this now :D


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

So it took me a little while to get back to this...unfortunately shifting the media queries part of the stylesheet into the head tags...did not work. Stumped again!

Was an awesome suggestion though!

roshodgekiss roshodgekiss, 4 years ago

Hi graphicgoose, sorry about that - I just did what I should have done from the beginning and played around with the code. A couple of things here:

- the <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> was preventing zooming, which can be a usability issue. Feel free to add back in, but make sure you test like crazy :)
- the table#container width CSS was commented out, which was preventing the overall layout from adapting to the width of the viewport
- table#container { margin: auto; } can cause issues - use the HTML attribute, align="center" instead

I've applied the above fixes and suggestions to the template code below. Sadly, I only tested in the browser, as I didn't have the images on hand.

Hopefully this fixes things up here for you, but if you're still in a jam after importing the following into the app, please let me know. Best of luck! :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body {
    background-image:url("images/bg.jpg");
    background-color:#f7f7f7;
    margin: 0;
    padding: 0;
}
img {
style:display:block;
}
table#headertable img {
    margin-top:5px;
}
td#logobar {
    padding:10px 0 60px 0;
}
p {
    font-size:12px;
    font-family:"Lucida Grande", sans-serif;
    padding:15px 30px 15px 30px;
    text-align:center;
    color:#565656;
}
p.main {
    font-size:11px;
    font-family:"Lucida Grande", sans-serif;
    padding:0px 30px 10px 30px;
    text-align:center;
    text-transform:uppercase;
}
p.mainsmall {
    font-size:11px;
    font-family:"Lucida Grande", sans-serif;
    padding:0px 30px 10px 30px;
    text-align:center;
}
img#quote {
    padding:0px 30px 25px 30px;
}
.newworkphoto {
    width:100%;
    text-align:center;
}
td.newworkcenter {
    margin:auto 0;
    text-align:center;
}
.newworkphoto img {
    border: 10px solid #f1f1f1;
    width:500px;
    margin-top:10px;
    margin-bottom:10px;
}
.vipphoto {
    width:100%;
    text-align:center;
}
td.vipcenter {
    margin:0 auto;
    text-align:center;
}
.vipphoto img {
    border: 10px solid #f1f1f1;
    width:500px;
    margin-top:10px;
    margin-bottom:10px;
}
.hiringphoto {
    width:100%;
    text-align:center;
}
td.hiringcenter {
    margin:0 auto;
    text-align:center;
}
.hiringphoto img {
    border: 10px solid #f1f1f1;
    width:500px;
    margin-top:10px;
    margin-bottom:10px;
}
.blogphoto {
    width:100%;
    text-align:center;
}
td.blogcenter {
    margin:0 auto;
    text-align:center;
}
.blogphoto img {
    border: 10px solid #f1f1f1;
    width:500px;
    margin-top:10px;
    margin-bottom:10px;
}
hr {
    width:520px;
    height:1px;
    color:#666;
    background-color:#CCC;
    border:0;
}
p.main a {
    text-decoration:none;
    font-weight:bold;
    color:#565656;
}
.newworkbutton img {
    width:250px;
    text-align:center;
    margin: 0px auto 10px auto;
}
.newworkbutton {
    width:250px;
    margin:0 auto;
}
.vipbutton img {
    width:250px;
    text-align:center;
    margin: 0px auto 10px auto;
}
.vipbutton {
    width:250px;
    margin:0 auto;
}
#footeranaloglink {
    width:290px;
    margin:0 auto;
}
#footerunsublink {
    width:290px;
    margin:0 auto;
}
.hiringbutton img {
    width:250px;
    text-align:center;
    margin: 0px auto 10px auto;
}
.hiringbutton {
    width:250px;
    margin:0 auto;
}
.blogbutton img {
    width:250px;
    text-align:center;
    margin: 0px auto 10px auto;
}
.blogbutton {
    width:250px;
    margin:0 auto;
}
ul.hiring {
    font-size:11px;
    font-family:"Lucida Grande", sans-serif;
    padding:0px 30px 10px 40px;
    text-align:left;
}
span.address {
    text-align:left;
    padding:0;
    font-size:13px;
    font-family:"Lucida Grande", sans-serif;
    color:#565656;
}
table#footinfo {
    margin:15px auto;
}
td table#footinfo {
    vertical-align:top;
}
.address a {
    color:#565656;
    text-decoration:none;
}
img.socialbuttons {
    width:25px;
    height:25px;
}
img.socialbuttons2 {
    width:25px;
    height:25px;
}
 @media only screen and (max-width: 568px) {
 #container {
width: 100%;
}
 span.hide {
display: none;
}
 table#headertable {
width: 100%;
!important
}
 td#headerbar {
width: 93.33333333333333%;
background-color:#ffffff;
!important
}
 #logobar img {
margin-left: auto;
margin-right: auto;
text-align:center;
!important
}
 #logobox {
width:280px;
margin:auto;
!important
}
 td#logobar {
padding:10px 0 20px 0;
!important
}
 #introimgbox {
display:none;
!important
}
 td#introimgcenter {
background-image:url(images/introimg_iphone.jpg);
height:94px;
background-position:center;
!important
}
 p.intro {
font-size:14px;
!important
}
 #quotebox {
display:none;
!important
}
 #newworktitlebox {
display:none;
!important
}
 td#newworktitlecenter {
background-image:url(images/newworktitle_iphone.jpg);
background-color:none;
height:34px;
background-position:center;
!important
}
 .newworkphoto img {
width:90%;
height:auto;
border: 6px solid #f1f1f1;
!important
}
 #viptitlebox {
display:none;
!important
}
 td#viptitlecenter {
background-image:url(images/viptitle_iphone.jpg);
background-color:none;
height:34px;
background-position:center;
!important
}
 #blogtitlebox {
display:none;
!important
}
 td#blogtitlecenter {
background-image:url(images/blogtitle_iphone.jpg);
background-color:none;
height:34px;
background-position:center;
!important
}
 .vipphoto img {
width:90%;
height:auto;
border: 6px solid #f1f1f1;
!important
}
 #hiringtitlebox {
display:none;
!important
}
 td#hiringtitlecenter {
background-image:url(images/hiringtitle_iphone.jpg);
background-color:none;
height:34px;
background-position:center;
!important
}
 .hiringphoto img {
width:90%;
height:auto;
border: 6px solid #f1f1f1;
!important
}
 .blogphoto img {
width:90%;
height:auto;
border: 6px solid #f1f1f1;
!important
}
 hr {
width:93%;
!important
}
 p.main {
font-size:14px;
line-height:20px;
!important
}
 p.mainsmall {
font-size:14px;
line-height:20px;
!important
}
 ul.hiring {
font-size:13px;
line-height:20px;
!important
}
 img.socialbuttons {
width:33px;
height:33px;
!important
}
}
</style>
<title>Mailer Template</title>
</head>
<body>
<table width="600" align="center" cellpadding="0" cellspacing="0" id="container">
  <!-- HEADER -->
  <tr>
    <td><table id="headertable" cellpadding="0" cellspacing="0">
        <tr>
          <td id="headerbarleft" width="20" style="background-color:#fff;">&nbsp;</td>
          <td id="headerbar" width="560" style="background-color:#fff;"><table cellpadding="0" cellspacing="0">
              <tr>
                <td width="156" id="webversion" valign="top"><webversion><img src="images/button_web.jpg" width="156" height="25" style="display:block;" border="0"/ alt="view webversion"></webversion></td>
                <td width="270">&nbsp;</td>
                <td width="134"><span class="hide"><a href="http://www.twitter.com/analogcreative"><img class="socialbuttons" src="images/button_twitter.jpg" border="0" style="margin-right:5px;" alt="analog twitter"/></a> <a href="http://www.facebook.com/analogcreative"><img class="socialbuttons" src="images/button_facebook.jpg" border="0" style="margin-right:5px;" alt="analog facebook"/></a> <a href="http://www.last.fm/user/analogcreative"><img class="socialbuttons" src="images/button_lastfm.jpg" border="0" style="margin-right:5px;" alt="analog lastfm"/></a> <a href="http://www.linkedin.com/company/1833571?goback=%2Epiv_I327838833*460_4957443_hMGi_*1_*1&trk=prof-0-ovw-curr_pos"><img class="socialbuttons" src="images/button_linkedin.jpg" border="0" alt="analog linkedin"/></a></span></td>
              </tr>
            </table></td>
          <td id="headerbarright" width="20" style="background-color:#fff;">&nbsp;</td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td class="headershadowcell" border="0"><img src="images/barborder.jpg" width="100%"/></td>
  </tr>
  <!-- LOGO -->
  <tr>
    <td><table id="logotable" cellpadding="0" cellspacing="0">
        <tr>
          <td id="logobarleft" width="20">&nbsp;</td>
          <td id="logobar" width="560"><div id="logobox"><img id="logo" src="images/logo.jpg" width="280" height="73" border="0" /></div></td>
          <td id="logobarright" width="20">&nbsp;</td>
        </tr>
        <!-- INTRO BOX -->
        <tr>
          <td id="introimgleft" width="20">&nbsp;</td>
          <td id="introimgcenter" width="560" style="background-color:#fff;"><div id="introimgbox"><img id="introimg" src="images/introimg.jpg" width="560" height="94" border="0" alt="butterfly header" /></div></td>
          <td id="introimgright" width="20">&nbsp;</td>
        </tr>
        <tr>
          <td id="introleft" width="20">&nbsp;</td>
          <td id="introcenter" width="560" style="background-color:#fff;"><p class="intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu imperdiet mauris. Etiam leo odio, iaculis vel rhoncus nec, sodales id eros. Mauris auctor facilisis.</p>
            <div id="quotebox"><img id="quote" src="images/quoteimg.jpg" width="500" height="84" border="0" alt="quote from arthur c clarke" /></div></td>
          <td id="introright" width="20">&nbsp;</td>
        </tr>
        <!-- SPACER -->
        <tr>
          <td class="spacerleft" width="20">&nbsp;</td>
          <td class="spacercenter" width="560">&nbsp;</td>
          <td class="spacerright" width="20">&nbsp;</td>
        </tr>
        <!-- NEW WORK -->
        <tr>
          <td id="newworktitleleft" width="20">&nbsp;</td>
          <td id="newworktitlecenter" width="560"><div id="newworktitlebox"><img id="newworktitleimg" src="images/newworktitle_640.jpg" width="560" height="34" border="0" style="display:block;"/></div></td>
          <td id="newworktitleright" width="20">&nbsp;</td>
        </tr>
        <!-- NEW WORK PIECE -->
        <tr>
          <td class="newworkleft" width="20">&nbsp;</td>
          <td class="newworkcenter" width="560" style="background-color:#fff;"><div class="newworkphoto"><img class"nwimg" src="images/new_heyerdahl.jpg" width="500" height="200" alt="screenshot of heyerdahl"/></div></td>
          <td class="newworkright" width="20">&nbsp;</td>
        </tr>
        <tr>
          <td class="newworkleft" width="20">&nbsp;</td>
          <td class="newworkcenter" width="560" style="background-color:#fff;"><p class="main">Type of project // Name of client // <a href="">View Project</a></p>
            <hr /></td>
          <td class="newworkright" width="20">&nbsp;</td>
        </tr>
        <!-- NEW WORK PIECE -->
        <tr>
          <td class="newworkleft" width="20">&nbsp;</td>
          <td class="newworkcenter" width="560" style="background-color:#fff;"><div class="newworkphoto"><img class"nwimg" src="images/new_heyerdahl.jpg" width="500" height="200" alt="screenshot of heyerdahl" /></div></td>
          <td class="newworkright" width="20">&nbsp;</td>
        </tr>
        <tr>
          <td class="newworkleft" width="20">&nbsp;</td>
          <td class="newworkcenter" width="560" style="background-color:#fff;"><p class="main">Type of project // Name of client // <a href="">View Project</a></p>
            <hr /></td>
          <td class="newworkright" width="20">&nbsp;</td>
        </tr>
        <!-- VIEW MORE LINK -->
        <tr>
          <td class="newworkleft" width="20">&nbsp;</td>
          <td class="newworkcenter" width="560" style="background-color:#fff;"><div class="newworkbutton"><a href=""><img src="images/button_work.jpg" width="250" height="35" border="0" alt="view more work link"/></a></div></td>
          <td class="newworkright" width="20">&nbsp;</td>
        </tr>
        <!-- SPACER -->
        <tr>
          <td class="spacerleft" width="20">&nbsp;</td>
          <td class="spacercenter" width="560">&nbsp;</td>
          <td class="spacerright" width="20">&nbsp;</td>
        </tr>
        <!-- VIP FEATURE -->
        <tr>
          <td id="viptitleleft" width="20">&nbsp;</td>
          <td id="viptitlecenter" width="560"><div id="viptitlebox"><img id="viptitleimg" src="images/viptitle_640.jpg" width="560" height="34" border="0" style="display:block;"/></div></td>
          <td id="viptitleright" width="20">&nbsp;</td>
        </tr>
        <!-- VIP FEATURE CONTENT -->
        <tr>
          <td class="vipleft" width="20">&nbsp;</td>
          <td class="vipcenter" width="560" style="background-color:#fff;"><div class="vipphoto"><img class"vipimg" src="images/vip_redeye.jpg" width="500" height="280" alt="screenshot of heyerdahl" /></div></td>
          <td class="vipright" width="20">&nbsp;</td>
        </tr>
        <tr>
          <td class="vipleft" width="20">&nbsp;</td>
          <td class="vipcenter" width="560" style="background-color:#fff;"><p class="mainsmall">Now that there is the Tec-9, a crappy spray gun from South Miami. This gun is advertised as the most popular gun in American crime. Do you believe that shit? It actually says that in the little book that comes with it: the most popular gun in American crime. Like they're actually proud of that shit. </p>
            <hr /></td>
          <td class="vipright" width="20">&nbsp;</td>
        </tr>
        <!-- VIEW PROJECT LINK -->
        <tr>
          <td class="vipleft" width="20">&nbsp;</td>
          <td class="vipcenter" width="560" style="background-color:#fff;"><div class="vipbutton"><a href=""><img src="images/button_project.jpg" width="250" height="35" border="0" alt="view project link" /></a></div></td>
          <td class="vipright" width="20">&nbsp;</td>
        </tr>
        <!-- SPACER -->
        <tr>
          <td class="spacerleft" width="20">&nbsp;</td>
          <td class="spacercenter" width="560">&nbsp;</td>
          <td class="spacerright" width="20">&nbsp;</td>
        </tr>
        <!-- HIRING FEATURE -->
        <tr>
          <td id="hiringtitleleft" width="20">&nbsp;</td>
          <td id="hiringtitlecenter" width="560"><div id="hiringtitlebox"><img id="hiringtitleimg" src="images/hiringtitle_640.jpg" width="560" height="34" border="0" style="display:block;" /></div></td>
          <td id="hiringtitleright" width="20">&nbsp;</td>
        </tr>
        <!-- HIRING CONTENT -->
        <tr>
          <td class="hiringleft" width="20">&nbsp;</td>
          <td class="hiringcenter" width="560" style="background-color:#fff;"><div class="hiringphoto"><img class"hiringimg" src="images/hiring_developer.jpg" width="500" height="180" alt="picture of geeky victorian"/></div></td>
          <td class="hiringright" width="20">&nbsp;</td>
        </tr>
        <tr>
          <td class="hiringleft" width="20">&nbsp;</td>
          <td class="hiringcenter" width="560" style="background-color:#fff;"><p class="mainsmall">Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house:</p>
            <ul class="hiring">
              <li>unbeatable ninja spelling skills</li>
              <li>can shoot a fish in the eye with a bow and arrow from 200 ft</li>
              <li>can recite all the lyrics from nirvana - nevermind...backward</li>
              <li>and a few more things</li>
            </ul>
            <hr /></td>
          <td class="hiringright" width="20">&nbsp;</td>
        </tr>
        <!-- HIRING LINK -->
        <tr>
          <td class="hiringleft" width="20">&nbsp;</td>
          <td class="hiringcenter" width="560" style="background-color:#fff;"><div class="hiringbutton"><a href=""><img src="images/button_hiring.jpg" width="250" height="35" border="0" alt="more information on job link"/></a></div></td>
          <td class="hiringright" width="20">&nbsp;</td>
        </tr>
        <!-- SPACER -->
        <tr>
          <td class="spacerleft" width="20">&nbsp;</td>
          <td class="spacercenter" width="560">&nbsp;</td>
          <td class="spacerright" width="20">&nbsp;</td>
        </tr>
        <!-- BLOG FEATURE -->
        <tr>
          <td id="blogtitleleft" width="20">&nbsp;</td>
          <td id="blogtitlecenter" width="560"><div id="blogtitlebox"><img id="viptitleimg" src="images/blogtitle_640.jpg" width="560" height="34" border="0" style="display:block;" /></div></td>
          <td id="blogtitleright" width="20">&nbsp;</td>
        </tr>
        <!-- SPACER -->
        <tr>
          <td class="spacerleft" width="20">&nbsp;</td>
          <td class="spacercenter" width="560" bgcolor="#FFFFFF">&nbsp;</td>
          <td class="spacerright" width="20">&nbsp;</td>
        </tr>
        <!-- BLOG FEATURE CONTENT -->
        <tr>
          <td class="blogleft" width="20">&nbsp;</td>
          <td class="blogcenter" width="560" style="background-color:#fff;"><p class="mainsmall">Lebowski ipsum nice marmot. Dolor sit amet, consectetur adipiscing elit praesent ac magna justo pellentesque. Over the line! Ac lectus quis elit blandit fringilla a ut turpis praesent felis. I'm not Mr. Lebowski; you're Mr. Lebowski.</p></td>
          <td class="blogright" width="20">&nbsp;</td>
        </tr>
        <tr>
          <td class="blogleft" width="20">&nbsp;</td>
          <td class="blogcenter" width="560" style="background-color:#fff;"><div class="blogphoto"><img class"blogimg" src="images/blog_placeholder.jpg" width="500" height="265" alt="photo of royal teeth" /></div></td>
          <td class="blogright" width="20">&nbsp;</td>
        </tr>
        <tr>
          <td class="blogleft" width="20">&nbsp;</td>
          <td class="blogcenter" width="560" style="background-color:#fff;"><p class="mainsmall">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla euismod vestibulum ipsum id mattis. Morbi eu nisl nec augue placerat lobortis. </p>
            <hr /></td>
          <td class="blogright" width="20">&nbsp;</td>
        </tr>
        <!--BLOG READ MORE LINK -->
        <tr>
          <td class="blogleft" width="20">&nbsp;</td>
          <td class="blogcenter" width="560" style="background-color:#fff;"><div class="blogbutton"><a href=""><img src="images/button_blog.jpg" width="250" height="35" border="0" alt="read the rest of blog link" /></a></div></td>
          <td class="blogright" width="20">&nbsp;</td>
        </tr>
        <!-- SPACER -->
        <tr>
          <td class="spacerleft" width="20">&nbsp;</td>
          <td class="spacercenter" width="560">&nbsp;</td>
          <td class="spacerright" width="20">&nbsp;</td>
        </tr>
      </table></td>
  </tr>
  <!-- FOOTER -->
  <tr>
    <td class="footershadowcell" border="0"><img src="images/barborder2.jpg" width="100%"/></td>
  </tr>
  <tr>
    <td><table class="footertable" cellpadding="0" cellspacing="0">
        <tr>
          <td class="footerbarleft" width="20" style="background-color:#fff;">&nbsp;</td>
          <td class="footerbar" width="560" style="background-color:#d6d6d6;"><div id="footeranaloglink"><a href="http://www.analog.la" border="0"><img src="images/button_footer_analog.jpg" width="290" height="25" border="0" alt="visit analog website link" /></a></div></td>
          <td class="footerbarright" width="20" style="background-color:#fff;">&nbsp;</td>
        </tr>
        <tr>
          <td class="footerbarleft" width="20" style="background-color:#fff;">&nbsp;</td>
          <td class="footerbar" width="560" style="background-color:#fff;"><table id="footinfo" width="290" cellpadding="0" cellspacing="0">
              <tr>
                <td width="156" valign="top"><span class="address"><strong>Analog Creative Inc.</strong><br />
                  517 Ocean Front Walk<br />
                  Suite 8<br />
                  Venice, CA 90291<br />
                  1-818-284-3639</span></td>
                <td width="134" valign="top"><a href="http://www.twitter.com/analogcreative"><img class="socialbuttons2" src="images/button_twitter.jpg" border="0" style="margin-right:5px;" alt="analog twitter"/></a> <a href="http://www.facebook.com/analogcreative"><img class="socialbuttons2" src="images/button_facebook.jpg" border="0" style="margin-right:5px;" alt="analog facebook"/></a> <a href="http://www.last.fm/user/analogcreative"><img class="socialbuttons2" src="images/button_lastfm.jpg" border="0" style="margin-right:5px;" alt="analog lastfm"/></a> <a href="http://www.linkedin.com/company/1833571?goback=%2Epiv_I327838833*460_4957443_hMGi_*1_*1&trk=prof-0-ovw-curr_pos"><img class="socialbuttons2" src="images/button_linkedin.jpg" border="0" alt="analog linkedin"/></a></td>
              </tr>
            </table></td>
          <td class="footerbarright" width="20" style="background-color:#fff;">&nbsp;</td>
        </tr>
        <tr>
          <td class="footerbarleft" width="20" style="background-color:#fff;">&nbsp;</td>
          <td class="footerbar" width="560" style="background-color:#d6d6d6;"><div id="footerunsublink">
              <unsubscribe><img src="images/button_footer_unsub.jpg" width="290" height="25" border="0" alt="unsubscribe link" /></unsubscribe>
            </div></td>
          <td class="footerbarright" width="20" style="background-color:#fff;">&nbsp;</td>
        </tr>
        <tr>
          <td class="footerbarleft" width="20" style="background-color:#fff;">&nbsp;</td>
          <td class="footerbar" width="560" style="background-color:#fff;">&nbsp;</td>
          <td class="footerbarright" width="20" style="background-color:#fff;">&nbsp;</td>
        </tr>
      </table></td>
  </tr>
</table>
</body>
</html>

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

Progress! Thank you so much! It didn't work initially, so I went through the import process again and unchecked "Move a copy of my CSS inline (recommended for the best results in Gmail, Outlook 2007 and Lotus Notes)" and now...it works! I haven't looked at it in Gmail yet, but I'll cross that bridge...later.

Few tweaks left to do now I've actually seen it on an iPhone (like swapping images for 'retina' friendly ones), but stoked to see actually working! :)

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