Header help!

Hi all,

I'm super new to responsive design let alone responsive emails! I do however know what I'm doing somewhat and am not completely out my comfort zone.

I have been given the task of creating the new emails for the company and once I had designed them, was told that it would be best to make them responsive!

I've used a template that is closest to my design and have got the first fraction to a fairly acceptable standard but would like help tweaking the header elements. How can I make my hero image and logo etc to display as it should when viewed on smaller screens?

I'd really appreciate someone looking at this for me and telling me where i'm going wrong!

Thanks :)

JohnP JohnP, 3 years ago

"Display as it should" - What do you want it to display like? Does that mean resize to the device or not resize and remain as it was when the rest is resizing...

Responsive email design is quite complex, without posting your example code, it is really hard to troubleshoot for you. Can you please post your code?

Graycode, 3 years ago

Hi John,

Thanks for your response. I mean resize to the device. Ive been using Sample by Us
template and trying to get my head around it all!  It's adding my own simple elements that seems to be the tricky part. Anyways, my code is below so I hope you can see where my issue with my header area is!

Thanks again.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title></title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style type="text/css">
/* Mobile-specific Styles */
@media only screen and (max-device-width: 480px) { 
table[class=w0], td[class=w0] { width: 0 !important; }
table[class=w10], td[class=w10], img[class=w10] { width:10px !important; }
table[class=w15], td[class=w15], img[class=w15] { width:5px !important; }
table[class=w30], td[class=w30], img[class=w30] { width:10px !important; }
table[class=w60], td[class=w60], img[class=w60] { width:10px !important; }
table[class=w125], td[class=w125], img[class=w125] { width:80px !important; }
table[class=w130], td[class=w130], img[class=w130] { width:55px !important; }
table[class=w140], td[class=w140], img[class=w140] { width:90px !important; }
table[class=w160], td[class=w160], img[class=w160] { width:180px !important; }
table[class=w170], td[class=w170], img[class=w170] { width:100px !important; }
table[class=w180], td[class=w180], img[class=w180] { width:80px !important; }
table[class=w195], td[class=w195], img[class=w195] { width:80px !important; }
table[class=w220], td[class=w220], img[class=w220] { width:80px !important; }
table[class=w240], td[class=w240], img[class=w240] { width:180px !important; }
table[class=w255], td[class=w255], img[class=w255] { width:185px !important; }
table[class=w275], td[class=w275], img[class=w275] { width:135px !important; }
table[class=w280], td[class=w280], img[class=w280] { width:135px !important; }
table[class=w300], td[class=w300], img[class=w300] { width:140px !important; }
table[class=w325], td[class=w325], img[class=w325] { width:95px !important; }
table[class=w360], td[class=w360], img[class=w360] { width:140px !important; }
table[class=w410], td[class=w410], img[class=w410] { width:180px !important; }
table[class=w470], td[class=w470], img[class=w470] { width:200px !important; }
table[class=w580], td[class=w580], img[class=w580] { width:280px !important; }
table[class=w640], td[class=w640], img[class=w640] { width:300px !important; }
table[class=hide], td[class=hide], img[class=hide], p[class=hide], span[class=hide], .hide { display:none !important; }
table[class=h0], td[class=h0] { height: 0 !important; }
p[class=footer-content-left] { text-align: center !important; }
#headline p { font-size: 30px !important; }
 } 
/* Client-specific Styles */
#outlook a { padding: 0; }    /* Force Outlook to provide a "view in browser" button. */
body { width: 100% !important; }
.ReadMsgBody { width: 100%; }
.ExternalClass { width: 100%; display:block !important; } /* Force Hotmail to display emails at full width */
/* Reset Styles */
/* Add 100px so mobile switch bar doesn't cover street address. */
html, body { background-color: #E4E4E4; margin: 0; padding: 0; }
img { height: auto; line-height: 100%; outline: none; text-decoration: none; display: block;}
br, strong br, b br, em br, i br { line-height:100%; }
h1, h2, h3, h4, h5, h6 { line-height: 100% !important; -webkit-font-smoothing: antialiased; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: blue !important; }
h1 a:active, h2 a:active,  h3 a:active, h4 a:active, h5 a:active, h6 a:active {    color: red !important; }
/* Preferably not the same color as the normal header link color.  There is limited support for psuedo classes in email clients, this was added just for good measure. */
h1 a:visited, h2 a:visited,  h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited { color: purple !important; }
/* Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. */  
table td, table tr { border-collapse: collapse; }
.yshortcuts, .yshortcuts a, .yshortcuts a:link,.yshortcuts a:visited, .yshortcuts a:hover, .yshortcuts a span {
color: black; text-decoration: none !important; border-bottom: none !important; background: none !important;
}    /* Body text color for the New Yahoo.  This example sets the font of Yahoo's Shortcuts to black. */
/* This most probably won't work in all email clients. Don't include <code _tmplitem="277" > blocks in email. */
code {
  white-space: normal;
  word-break: break-all;
}
#background-table { background-color: #E4E4E4; }
/* Webkit Elements */
#top-bar { border-radius:6px 6px 0px 0px; -moz-border-radius: 6px 6px 0px 0px; -webkit-border-radius:6px 6px 0px 0px; -webkit-font-smoothing: antialiased; background-color: #E4E4E4; color: #cccccc; text-decoration:none; }
#top-bar a { font-weight: bold; color: #444444; text-decoration: none;}
#footer { border-radius:0px 0px 6px 6px; -moz-border-radius: 0px 0px 6px 6px; -webkit-border-radius:0px 0px 6px 6px; -webkit-font-smoothing: antialiased; }
/* Fonts and Content */
body { font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; }
.header-content, .footer-content-left, .footer-content-right { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; }
/* Prevent Webkit and Windows Mobile platforms from changing default font sizes on header and footer. */
.header-content {
    font-size: 12px;
    color: #8d8d8d;
    font-weight: bold;
}
.header-content a { font-weight: bold; color: #444444; text-decoration: none; }
#headline p { color: #e7cba3; font-family: Helvetica Neue, Arial, Helvetica, Geneva, sans-serif; font-size: 36px; text-align: center; margin-top:0px; margin-bottom:30px; }
#headline p a { color: #e7cba3; text-decoration: none; }
.article-title { font-size: 20px; line-height:10px; color: #0166b1; font-weight:bold; margin-top:10px; margin-bottom:10px; font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; }
.content-title { font-size: 22px; line-height:24px; color: #1b3180; font-weight:bold; margin-top:0px; margin-bottom:18px; font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; }

.article-title a { color: #444444; text-decoration: none; }
.article-title.with-meta {margin-bottom: 0;}
.article-meta { font-size: 13px; line-height: 20px; color: #ccc; font-weight: bold; margin-top: 0;}
.article-content { font-size: 13px; line-height: 18px; color: #363636; margin-top: 0px; margin-bottom: 18px; font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; }
.article-content a { color: #3CA7DD; font-weight:bold; text-decoration:none; }
.article-content img { max-width: 100% }
.article-content ol, .article-content ul { margin-top:0px; margin-bottom:18px; margin-left:19px; padding:0; }
.article-content li { font-size: 13px; line-height: 18px; color: #888888; }
.article-content li a { color: #3CA7DD; text-decoration:underline; }
.article-content p {margin-bottom: 15px;}
.footer-content-left { font-size: 12px; line-height: 15px; color: #A6A6A6; margin-top: 0px; margin-bottom: 15px; }
.footer-content-left a { color: #3CA7DD; font-weight: bold; text-decoration: none; }
.footer-content-right { font-size: 11px; line-height: 16px; color: #A6A6A6; margin-top: 0px; margin-bottom: 15px; }
.footer-content-right a { color: #3CA7DD; font-weight: bold; text-decoration: none; }
#footer { background-color: #f2f2f2; color: #A6A6A6; }
#footer a { color: #3CA7DD; text-decoration: none; font-weight: bold; }
#permission-reminder { white-space: pre-wrap; }
#street-address { color: #B3B3B3; white-space: pre-wrap; }

p.footnoteTop { border-top: 4px solid #1b3281; margin-top:10px;}

#background-table .w640 #top-bar {
    font-family:Arial, Helvetica, sans-serif;
    text-decoration:none;
    font-size: 12px;
}
</style>
<!--[if gte mso 9]>
<style _tmplitem="277" >
.article-content ol, .article-content ul {
   margin: 0 0 0 24px;
   padding: 0;
   list-style-position: inside;
}
</style>
<![endif]--></head><body><table width="100%" cellpadding="0" cellspacing="0" border="0" id="background-table">
    <tbody><tr>
        <td align="center" bgcolor="#E4E4E4">
         <table class="w640" width="640" cellpadding="0" cellspacing="0" border="0">
                <tbody><tr><td height="20" colspan="2" class="w640"></td></tr>
                
                <tr>
                    <td colspan="2" class="w640">
                        <table id="top-bar" class="w640" width="640" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff">
    <tbody><tr>
        <td class="w15" width="40" bgcolor="#FFFFFF"></td>
        <td class="w325" width="350" valign="middle" align="left" bgcolor="#FFFFFF">
            <table class="w325" width="350" cellpadding="0" cellspacing="0" border="0">
                <tbody><tr><td class="w325" width="350" height="8"></td></tr>
            </tbody></table>
            <div class="header-content">
              <webversion>Ask a question</webversion><span class="hide">&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<preferences>Read our blog</preferences>
              &nbsp;</span></div>
            <table class="w325" width="350" cellpadding="0" cellspacing="0" border="0">
                <tbody><tr><td class="w325" width="350" height="8"></td></tr>
            </tbody></table>
        </td>
        <td class="w30" width="30" bgcolor="#FFFFFF"></td>
        <td class="w255" width="255" valign="middle" align="right" bgcolor="#FFFFFF">
            <table class="w255" width="255" cellpadding="0" cellspacing="0" border="0">
                <tbody><tr><td class="w255" width="255" height="8" bgcolor="#FFFFFF"></td></tr>
            </tbody></table>
            <table cellpadding="0" cellspacing="0" border="0">
    <tbody><tr>
        
        <td width="30" valign="middle"><img src="images/FB.jpg" border="0" width="24" height="23" alt="Facebook icon"></td>
        <td width="3"></td>
        <td width="30" valign="middle"><img src="images/twit.jpg" border="0" width="24" height="24" alt="Twitter icon"></td>
        
        
        <td class="w10" width="1"></td>
        <td width="30" valign="middle"><img src="images/yt.jpg" border="0" width="24" height="24" alt="YouTube icon"></td>
        <td width="30"><img src="images/flickr.jpg" border="0" width="24" height="24" alt="Flickr icon"></td>
        <td width="30" valign="middle"><img src="images/gplus.jpg" border="0" width="24" height="24" alt="Google plus icon"></td>
        
        
       
    </tr>
</tbody></table>
            <table class="w255" width="255" cellpadding="0" cellspacing="0" border="0">
                <tbody><tr><td class="w255" width="255" height="8"></td></tr>
            </tbody></table>
        </td>
        <td class="w15" width="15" bgcolor="#FFFFFF"></td>
    </tr>
</tbody></table>
                <table id="top-bar" class="w640" width="640" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff">
    <tbody><tr bgcolor="#FFFFFF">
        <td width="15">&nbsp;</td>
        <td width="46"><a href="http://www.crystalski.co.uk/ski-resorts/austria-ski-holidays/?em=cs080213" target="_blank" style="text-decoration: none; color: #555555; font-weight: normal;">Austria</a></td>
        <td width="26">|</td>
        <td width="54"><a href="http://www.crystalski.co.uk/ski-resorts/france-ski-holidays/?em=cs080213" target="_blank" style="text-decoration: none;color: #555555; font-weight: normal;">France</a></td>
        <td width="20">|</td>
        <td width="45"><a href="http://www.crystalski.co.uk/ski-resorts/italy-ski-holidays/?em=cs080213" target="_blank" style="text-decoration: none;color: #555555; font-weight: normal;">Italy</a></td>
        <td width="19">|</td>
        <td width="83"><a href="http://www.crystalski.co.uk/ski-resorts/switzerland-ski-holidays/?em=cs080213" target="_blank" style="text-decoration: none;color: #555555; font-weight: normal;">Switzerland</a></td>
        <td width="32">|</td>
        <td width="68"><a href="http://www.crystalski.co.uk/ski-resorts/canada-ski-holidays/?em=cs080213" target="_blank" style="text-decoration: none;color: #555555; font-weight: normal;">Canada</a></td>
        <td width="25">|</td>
        <td width="40"><a href="http://www.crystalski.co.uk/ski-resorts/usa-ski-holidays/?em=cs080213" target="_blank" style="text-decoration: none;color: #555555; font-weight: normal;">USA</a></td>
        <td width="26">|</td>
        <td width="141"><a href="http://www.crystalski.co.uk/ski-resorts/?em=cs080213" target="_blank" style="text-decoration: none;color: #555555; font-weight: normal;">All Ski destinations</a></td>
      </tr>
</tbody></table>        
                    </td>
                </tr>
                <tr>
                  <td width="385" height="45" align="left" bgcolor="#ffffff" class="w360" id="header3"><img id="customHeaderImage" src="http://placehold.it/341x42" class="w360" border="0" align="top" style="display: inline"></td>
                  <td width="245" rowspan="2" align="right" bgcolor="#ffffff" class="w60" id="header3"><img id="customHeaderImage2" src="http://placehold.it/58x73" class="w60" border="0" align="top" style="display: inline" /></td>
                  </tr>
                <tr>
                  <td align="left" bgcolor="#ffffff" class="w360" id="header2"><img id="customHeaderImage" src="http://placehold.it/361x42" class="w360" border="0" align="top" style="display: inline"></td>
                  </tr>
                <tr>
                <td colspan="2" align="center" bgcolor="#ffffff" width="640" class="w640" id="header">
    
    <div align="center" style="text-align: center"><img id="customHeaderImage3" src="http://placehold.it/640x197" class="w640" border="0" align="top" style="display: inline" /></div>
        
    
</td>
                </tr>
                
                <tr><td height="10" colspan="2" bgcolor="#ffffff" class="w640"><p class="footnoteTop"></p></td></tr>
                <tr id="simple-content-row"><td colspan="2" bgcolor="#ffffff" class="w640">
    <table class="w640" width="640" cellpadding="0" cellspacing="0" border="0">
        <tbody><tr>
            <td class="w30" width="30"></td>
            <td class="w580" width="580">
                <repeater>
                
                
                    
                    <layout label="Text with blue box"> <!--input text only-->
                        <table class="w580" width="580" cellpadding="0" cellspacing="0" border="0">
                            <tbody><tr>
                                <td class="w580" width="580" bgcolor="#e6f8ff" style="padding:5px;">
                                    <p align="left" class="content-title"><singleline label="Title">Add a title</singleline></p>
                                    <div align="left" class="article-content">
                                        <multiline label="Description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</multiline>
                                    </div>
                                </td>
                            </tr>
                            <tr><td class="w580" width="580" height="10"></td></tr>
                            
                        </tbody></table>
                    </layout>
                                        
                    
                    <layout label="Text full-width">
                        <table class="w580" width="580" cellpadding="0" cellspacing="0" border="0">
                            <tbody><tr>
                                <td class="w580" width="580" style="padding:5px;">
                                    <p align="left" class="article-title">Subheader 1</p>
                                </td>
                            </tr>
                           <!-- <tr>
                                <td class="w580" width="580"><img editable="true" label="Image" class="w580" width="580" border="0"></td>
                            </tr>-->
                            <tr>
                              <td class="w580" width="580" height="15"><span class="article-content">
                                <multiline label="Description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</multiline>
                              </span></td></tr>
                         <!--   <tr>
                                <td class="w580" width="580">
                                    <div align="left" class="article-content">
                                        <multiline label="Description"></multiline>
                                    </div>
                                </td>
                            </tr>-->
                            <tr><td class="w580" width="580" height="15"></td></tr>
                        </tbody></table>
                    </layout>
                       <layout label="Image gallery">
                        <table class="w580" width="580" cellpadding="0" cellspacing="0" border="0">
                            <tbody><tr>
                                <td class="w180" width="180" valign="top">
                                    <table class="w180" width="180" cellpadding="0" cellspacing="0" border="0">
                                        <tbody><tr>
                                            <td class="w180" width="180"><img editable="true" label="Image" class="w180" width="180" border="0"></td>
                                        </tr>
                                        <tr><td class="w180" width="180" height="10"><img src="http://placehold.it/180x116" class="w180" border="0" align="top" style="display: inline" /></td></tr>
                                        <tr bgcolor="#cad9e4">
                                            <td class="w180" width="180">
                                                <div align="left" class="article-content">
                                                    <multiline label="Description">Enter your description</multiline>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr><td class="w180" width="180" height="10"></td></tr>
                                    </tbody></table>
                                </td>
                                <td width="20"></td>
                                <td class="w180" width="180" valign="top">
                                    <table class="w180" width="180" cellpadding="0" cellspacing="0" border="0">
                                        <tbody><tr>
                                            <td class="w180" width="180"><img editable="true" label="Image" class="w180" width="180" border="0"></td>
                                        </tr>
                                        <tr><td class="w180" width="180" height="10"><img src="http://placehold.it/180x116" class="w180" border="0" align="top" style="display: inline" /></td></tr>
                                        <tr bgcolor="#cad9e4">
                                            <td class="w180" width="180">
                                                <div align="left" class="article-content">
                                                    <multiline label="Description">Enter your description</multiline>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr><td class="w180" width="180" height="10"></td></tr>
                                    </tbody></table>
                                </td>
                                <td width="20"></td>
                                <td class="w180" width="180" valign="top">
                                    <table class="w180" width="180" cellpadding="0" cellspacing="0" border="0">
                                        <tbody><tr>
                                            <td class="w180" width="180"><img editable="true" label="Image" class="w180" width="180" border="0"></td>
                                        </tr>
                                        <tr><td class="w180" width="180" height="10"><img src="http://placehold.it/180x116" class="w180" border="0" align="top" style="display: inline" /></td></tr>
                                        <tr bgcolor="#cad9e4">
                                            <td class="w180" width="180">
                                                <div align="left" class="article-content">
                                                    <multiline label="Description">Enter your description</multiline>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr><td class="w180" width="180" height="10"></td></tr>
                                    </tbody></table>
                                </td>
                            </tr>
                        </tbody></table>
                    </layout>
                     <layout label="Image gallery">
                        <table class="w580" width="580" cellpadding="0" cellspacing="0" border="0">
                            <tbody><tr>
                                <td class="w180" width="180" valign="top">
                                    <table class="w180" width="180" cellpadding="0" cellspacing="0" border="0">
                                        <tbody><tr>
                                            <td class="w180" width="180"><img editable="true" label="Image" class="w180" width="180" border="0"></td>
                                        </tr>
                                        <tr><td class="w180" width="180" height="10"><img src="http://placehold.it/180x116" class="w180" border="0" align="top" style="display: inline" /></td></tr>
                                        <tr bgcolor="#cad9e4">
                                            <td class="w180" width="180">
                                                <div align="left" class="article-content">
                                                    <multiline label="Description">Enter your description</multiline>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr><td class="w180" width="180" height="10"></td></tr>
                                    </tbody></table>
                                </td>
                                <td width="20"></td>
                                <td class="w180" width="180" valign="top">
                                    <table class="w180" width="180" cellpadding="0" cellspacing="0" border="0">
                                        <tbody><tr>
                                            <td class="w180" width="180"><img editable="true" label="Image" class="w180" width="180" border="0"></td>
                                        </tr>
                                        <tr><td class="w180" width="180" height="10"><img src="http://placehold.it/180x116" class="w180" border="0" align="top" style="display: inline" /></td></tr>
                                        <tr bgcolor="#cad9e4">
                                            <td class="w180" width="180">
                                                <div align="left" class="article-content">
                                                    <multiline label="Description">Enter your description</multiline>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr><td class="w180" width="180" height="10"></td></tr>
                                    </tbody></table>
                                </td>
                                <td width="20"></td>
                                <td class="w180" width="180" valign="top">
                                    <table class="w180" width="180" cellpadding="0" cellspacing="0" border="0">
                                        <tbody><tr>
                                            <td class="w180" width="180"><img editable="true" label="Image" class="w180" width="180" border="0"></td>
                                        </tr>
                                        <tr><td class="w180" width="180" height="10"><img src="http://placehold.it/180x116" class="w180" border="0" align="top" style="display: inline" /></td></tr>
                                        <tr bgcolor="#cad9e4">
                                            <td class="w180" width="180">
                                                <div align="left" class="article-content">
                                                    <multiline label="Description">Enter your description</multiline>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr><td class="w180" width="180" height="10"></td></tr>
                                    </tbody></table>
                                </td>
                            </tr>
                        </tbody></table>
                    </layout>
                    <layout label="Text with right-aligned image">
                        <table class="w580" width="580" cellpadding="0" cellspacing="0" border="0">
                            <tbody><tr>
                                <td class="w580" width="580">
                                    <p align="left" class="article-title"><singleline label="Title">Add a title</singleline></p>
                                    <table cellpadding="0" cellspacing="0" border="0" align="right">
                                        <tbody><tr>
                                            <td class="w30" width="15"></td>
                                            <td><img editable="true" label="Image" class="w300" width="300" border="0"></td>
                                        </tr>
                                        <tr><td class="w30" width="15" height="5"></td><td></td></tr>
                                    </tbody></table>
                                    <div align="left" class="article-content">
                                        <multiline label="Description">Enter your description</multiline>
                                    </div>
                                </td>
                            </tr>
                            <tr><td class="w580" width="580" height="10"></td></tr>
                        </tbody></table>
                    </layout>
                                        
                    
                    <layout label="Text with left-aligned image">
                        <table class="w580" width="580" cellpadding="0" cellspacing="0" border="0">
                            <tbody><tr>
                                <td class="w580" width="580">
                                    <p align="left" class="article-title"><singleline label="Title">Add a title</singleline></p>
                                <table cellpadding="0" cellspacing="0" border="0" align="left">
                                        <tbody><tr>
                                            <td><img editable="true" label="Image" class="w300" width="300" border="0"></td>
                                            <td class="w30" width="15"></td>
                                        </tr>
                                        <tr><td></td><td class="w30" width="15" height="5"></td></tr>
                                    </tbody></table>
                                    <div align="left" class="article-content">
                                        <multiline label="Description">Enter your description</multiline>
                                    </div>
                                </td>
                            </tr>
                            <tr><td class="w580" width="580" height="10"></td></tr>
                        </tbody></table>
                    </layout>
                                                                                
                    
                    <layout label="Two columns">
                        <table class="w580" width="580" cellpadding="0" cellspacing="0" border="0">
                            <tbody><tr>
                                <td class="w275" width="275" valign="top">
                                    <table class="w275" width="275" cellpadding="0" cellspacing="0" border="0">
                                        <tbody><tr>
                                            <td class="w275" width="275">
                                                <p align="left" class="article-title"><singleline label="Title">Add a title</singleline></p>
                                                <div align="left" class="article-content">
                                                    <multiline label="Description">Enter your description</multiline>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr><td class="w275" width="275" height="10"></td></tr>
                                    </tbody></table>
                                </td>
                                <td class="w30" width="30"></td>
                                <td class="w275" width="275" valign="top">
                                    <table class="w275" width="275" cellpadding="0" cellspacing="0" border="0">
                                        <tbody><tr>
                                            <td class="w275" width="275">
                                                <p align="left" class="article-title"><singleline label="Title">Add a title</singleline></p>
                                                <div align="left" class="article-content">
                                                    <multiline label="Description">Enter your description</multiline>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr><td class="w275" width="275" height="10"></td></tr>
                                    </tbody></table>
                                </td>
                            </tr>
                        </tbody></table>
                    </layout>
                                        
                                        
                    
                   
                </repeater>
            </td>
            <td class="w30" width="30"></td>
        </tr>
    </tbody></table>
</td></tr>
                <tr><td height="15" colspan="2" bgcolor="#ffffff" class="w640"></td></tr>
                
                <tr>
                <td colspan="2" class="w640">
    <table id="footer" class="w640" width="640" cellpadding="0" cellspacing="0" border="0" bgcolor="#f2f2f2">
    <tbody><tr><td class="w30" width="30"></td><td class="w580 h0" width="360" height="30"></td><td class="w0" width="60"></td><td class="w0" width="160"></td><td class="w30" width="30"></td></tr>
        <tr>
            <td class="w30" width="30"></td>
            <td class="w580" width="360" valign="top">
            <span class="hide"><p id="permission-reminder" align="left" class="footer-content-left">You&rsquo;re receiving this because you&rsquo;re an awesome ABC Widgets customer or subscribed via our site.</p></span>
            <p align="left" class="footer-content-left"><preferences>Edit your subscription</preferences> | <unsubscribe>Unsubscribe instantly</unsubscribe></p>
            </td>
            <td class="hide w0" width="60"></td>
            <td class="hide w0" width="160" valign="top">
            <p id="street-address" align="right" class="footer-content-right">ABC Widgets
87 Street Avenue, California</p>
            </td>
            <td class="w30" width="30"></td>
        </tr>
        <tr><td class="w30" width="30"></td><td class="w580 h0" width="360" height="15"></td><td class="w0" width="60"></td><td class="w0" width="160"></td><td class="w30" width="30"></td></tr>
    </tbody></table>
</td>
                </tr>
                <tr><td height="60" colspan="2" class="w640"></td></tr>
            </tbody></table>
        </td>
    </tr>
</tbody></table></body></html>
JohnP :

"Display as it should" - What do you want it to display like? Does that mean resize to the device or not resize and remain as it was when the rest is resizing...

Responsive email design is quite complex, without posting your example code, it is really hard to troubleshoot for you. Can you please post your code?

roshodgekiss roshodgekiss, 3 years ago

Hi Graycode, I see that some of the elements in the header are pushing out the width of the email layout when viewed on mobile devices. See:

http://cl.ly/image/1r3e3Z0b150Z

Is this specifically the issue that you're having? If so, you may want to try nesting the 3 smaller images above the header image in a table with width="100%", then try resizing them from there using media queries. 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
Graycode, 3 years ago
roshodgekiss :

Hi Graycode, I see that some of the elements in the header are pushing out the width of the email layout when viewed on mobile devices. See:

http://cl.ly/image/1r3e3Z0b150Z

Is this specifically the issue that you're having? If so, you may want to try nesting the 3 smaller images above the header image in a table with width="100%", then try resizing them from there using media queries. Let us know how you go :)


Yes, that's the main issue. That's really helpful. Thank you :)

How do you recommend I go about resizing it correctly? Is there a standar size? For example, what media query is best to use for an image at size 361x42?

Thanks for your help :)

roshodgekiss roshodgekiss, 3 years ago

Hi Graycode, if you want to work with the existing code here, I recommend looking at the classes in the media query and tailoring all elements to suit them.

For example, the table containing all content has the class, 'w640' applied. You'll see in the media query that elements with this class are resized to 300px in width:

@media only screen and (max-device-width: 480px) { 
   ...
   table[class=w640], td[class=w640], img[class=w640] { width:300px !important; }
   ...
}

So if you have an image that's 361px, I'd recommend either applying the 'w640' class to it, or adding a new CSS class within the media query to resize it to fit the layout. Something like:

img[class=w361] { width:300px !important; height: auto !important; }

Thanks Graycode - f you haven't already, I recommend giving our Guide to Responsive Email a read. Happy learning!


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

Hi Graycode, if you want to work with the existing code here, I recommend looking at the classes in the media query and tailoring all elements to suit them.

For example, the table containing all content has the class, 'w640' applied. You'll see in the media query that elements with this class are resized to 300px in width:

@media only screen and (max-device-width: 480px) { 
   ...
   table[class=w640], td[class=w640], img[class=w640] { width:300px !important; }
   ...
}

So if you have an image that's 361px, I'd recommend either applying the 'w640' class to it, or adding a new CSS class within the media query to resize it to fit the layout. Something like:

img[class=w361] { width:300px !important; height: auto !important; }

Thanks Graycode - f you haven't already, I recommend giving our Guide to Responsive Email a read. Happy learning!

Thank you very much! I have looked at the guides but must give it another read. Thanks for the clarification. :)

roshodgekiss roshodgekiss, 3 years ago

You're always very welcome :)


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

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