iphone screen display does not line up

I'm using the basic newsletter template builder and have been very fustrated trying to get the width of the email to be consistent when viewed on my iphone. I though it was because I had edited it in Dreamweaver, but I've just tried a test using a totally unchanged template and it still does the same thing ie the Quick LInks Bar at the top and the footer panel are not as wide as the main email content.
Other templates I have created have not done this, so I am baffled.
Is this a fault with the template builder? Is there a quick fix?

roshodgekiss roshodgekiss, 4 years ago

Hi again Barbara, would it be possible for you to post a screenshot and code here? Then we'll be able to look into what may be happening and recommend a fix for you.

It's likely that something in your content is pushing out the width of the layout. Commonly, having a long URL (eg. http://www.yourdomain.com/.../...) can extend the width of a editable region.

Thanks, Barbara! I really hope we can get your design to look great :)


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

I don't think I can send a screen shot from my iphone? this is the template code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>News and offers from Margaret Turton Art</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: #455977; 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="2911" > blocks in email. */
code {
  white-space: normal;
  word-break: break-all;
}
#background-table { background-color: #455977; }
/* 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: #b6daf5; color: #ffffff; }
#top-bar a { font-weight: bold; color: #455977; 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, Geneva, 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: #ffffff; }
.header-content a { font-weight: bold; color: #455977; text-decoration: none; }
#headline p { color: #72a6a6; 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: #72a6a6; text-decoration: none; }
#left-sidebar .toc-item { font-family: Helvetica Neue, Arial, Helvetica, Geneva, sans-serif; font-size: 12px; line-height: 16px; color: #259978; margin-top: 0px; margin-bottom: 6px; }
#left-sidebar .toc-item a { color: #259978; text-decoration: none; }
#left-sidebar .toc-heading { font-family: Helvetica Neue, Arial, Helvetica, Geneva, sans-serif; font-size: 11px; line-height: 15px; color:#06406F; font-weight:bold; }
#left-sidebar .toc-heading a { color: #06406F; text-decoration: none; }
#left-sidebar .left-column-heading { font-family: Helvetica Neue, Arial, Helvetica, Geneva, sans-serif; font-size: 11px; line-height:15px; color: #06406f; font-weight:bold; }
#left-sidebar .left-column-heading a { color: #06406f; text-decoration:none; }
#left-sidebar .left-column-subhead { font-family: Helvetica Neue, Arial, Helvetica, Geneva, sans-serif; font-size: 13px; line-height: 16px; color: #666666; font-weight: bold; margin-top: 0px; margin-bottom: 16px; }
#left-sidebar .left-column-subhead a { color: #666666; text-decoration:none; }
#left-sidebar .left-column-content { font-family: Helvetica Neue, Arial, Helvetica, Geneva, sans-serif; font-size: 12px; line-height: 16px; color: #455977; margin-top: 0px; margin-bottom: 16px; }
#left-sidebar .left-column-content a { color: #259978; text-decoration: none; }
.article-title { font-size: 18px; line-height:24px; color: #999999; font-weight:bold; margin-top:0px; margin-bottom:18px; font-family: Helvetica Neue, Arial, Helvetica, Geneva, sans-serif; }
.article-title a { color: #999999; 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: #444444; margin-top: 0px; margin-bottom: 18px; font-family: Helvetica Neue, Arial, Helvetica, Geneva, sans-serif; }
.article-content a { color: #2E5BA8; 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: #444444; }
.article-content li a { color: #2E5BA8; text-decoration:underline; }
.article-content p {margin-bottom: 15px;}
.footer-content-left { font-size: 12px; line-height: 15px; color: #455977; margin-top: 0px; margin-bottom: 15px; }
.footer-content-left a { color: #455977; font-weight: bold; text-decoration: none; }
.footer-content-right { font-size: 11px; line-height: 16px; color: #455977; margin-top: 0px; margin-bottom: 15px; }
.footer-content-right a { color: #455977; font-weight: bold; text-decoration: none; }
#footer { background-color: #B6DAF5; color: #455977; }
#footer a { color: #455977; text-decoration: none; font-weight: bold; }
#permission-reminder { white-space: normal; }
#street-address { color: #444444; white-space: normal; }
.footer-content-left1 {-webkit-text-size-adjust: none; -ms-text-size-adjust: none; }
.footer-content-left1 {font-size: 12px; line-height: 15px; color: #455977; margin-top: 0px; margin-bottom: 15px; }
.footer-content-right1 {-webkit-text-size-adjust: none; -ms-text-size-adjust: none; }
.footer-content-right1 {font-size: 11px; line-height: 16px; color: #455977; margin-top: 0px; margin-bottom: 15px; }
.header-content1 {-webkit-text-size-adjust: none; -ms-text-size-adjust: none; }
.footer-content-left2 {-webkit-text-size-adjust: none; -ms-text-size-adjust: none; }
.footer-content-right2 {-webkit-text-size-adjust: none; -ms-text-size-adjust: none; }
.footer-content-right2 {font-size: 11px; line-height: 16px; color: #455977; margin-top: 0px; margin-bottom: 15px; }
.header-content2 {-webkit-text-size-adjust: none; -ms-text-size-adjust: none; }
</style>
<!--[if gte mso 9]>
<style _tmplitem="2911" >
.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="#455977">
            <table class="w640" width="640" cellpadding="0" cellspacing="0" border="0">
                <tbody><tr>
                  <td width="640" height="20" class="w640" style="font-size: xx-small; color: #b6daf5;">Latest creations and news of events from Margaret Turton Art</td></tr>
                
                <tr>
                    <td class="w640" width="640">
                        <table id="top-bar" class="w640" width="640" cellpadding="0" cellspacing="0" border="0" bgcolor="#FFFFFF">
    <tbody><tr>
        <td class="w15" width="15"></td>
        <td class="w325" width="350" valign="middle" align="left">
            <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>Web version</webversion></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"></td>
        <td class="w255" width="255" valign="middle" align="right">
            <table class="w255" width="255" cellpadding="0" cellspacing="0" border="0">
                <tbody><tr><td class="w255" width="255" height="8"></td></tr>
            </tbody></table>
            <table cellpadding="0" cellspacing="0" border="0">
    <tbody><tr>
        
        <td valign="middle"><fblike likeurl="http://www.margaretturtonart.co.uk/"><img src="http://img.createsend1.com/img/templatebuilder/like-glyph.png" border="0" width="8" height="14" alt="Facebook icon"=""></fblike></td>
        <td width="3"></td>
        <td valign="middle"><div class="header-content"><fblike likeurl="http://www.margaretturtonart.co.uk/">Like</fblike></div></td>
        
        
        <td class="w10" width="10"></td>
        <td valign="middle"><tweet><img src="http://img.createsend1.com/img/templatebuilder/tweet-glyph.png" border="0" width="17" height="13" alt="Twitter icon"=""></tweet></td>
        <td width="3"></td>
        <td valign="middle"><div class="header-content"><tweet>Tweet</tweet></div></td>
        
        
        <td class="w10" width="10"></td>
        <td valign="middle"><forwardtoafriend><img src="http://img.createsend1.com/img/templatebuilder/forward-glyph.png" border="0" width="19" height="14" alt="Forward icon"=""></forwardtoafriend></td>
        <td width="3"></td>
        <td valign="middle"><div class="header-content"><forwardtoafriend>Forward</forwardtoafriend></div></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"></td>
    </tr>
</tbody></table>
                        
                    </td>
                </tr>
                <tr>
                <td id="header" class="w640" width="640" align="center" bgcolor="#FFFFFF">
                <div align="center" style="text-align: center"><a href="http://www.margaretturtonart.co.uk"><img src="images/Banner-Header.093819.jpg" alt="News and offers from Margaret Turton Art" border="0" align="top" class="w640" id="customHeaderImage" style="display: inline" /></a></div></td>
                </tr>
                
                <tr id="twocolumn-content-row"><td class="w640" width="640"><table class="w640" width="640" cellpadding="0" cellspacing="0" border="0">
    <tbody><tr>
        <td class="w15" width="15" bgcolor="#e8ebf7"></td>
        <td id="left-sidebar" class="w140" width="140" bgcolor="#e8ebf7" valign="top" align="left">
            
            <table class="w140" width="140" cellpadding="0" cellspacing="0" border="0">
                <tbody><tr><td class="w140" width="140" height="15"></td></tr>
                <tr>
                    <td class="w140" width="140">
                        <p align="left" class="toc-heading">TABLE OF CONTENTS</p>
                        <tableofcontents>
                            <table cellpadding="0" cellspacing="0" border="0">
                                <tbody><tr>
                                    <td width="3"></td>
                                    <td valign="top"><p align="left" class="toc-item">•</p></td>
                                    <td width="6"></td>
                                    <td valign="top"><p align="left" class="toc-item"><strong><repeatertitle></strong></p></td>
                                </tr>
                            </tbody></table>
                        </tableofcontents>
                    </td>
                </tr>
                <tr><td class="w140" width="140" height="15"></td></tr>
            </tbody></table>
            
            
            <table class="w140" width="140" cellpadding="0" cellspacing="0" border="0">
                <tbody><tr><td class="w140" width="140" height="15"></td></tr>
                <tr>
                    <td class="w140" width="140">
                        <div align="left" class="left-column-heading"><singleline label="Title">NEWS IN BRIEF</singleline></div>
                    </td>
                </tr>
            </tbody></table>
                                
            <repeater>    
                <layout label="Text only">
                    <table class="w140" width="140" cellpadding="0" cellspacing="0" border="0">
                        <tbody><tr><td class="w140" width="140" height="15"></td></tr>
                        <tr>
                            <td class="w140" width="140">
                                <p align="left" class="left-column-subhead"><singleline label="Title">Add a title</singleline></p>
                                <div align="left" class="left-column-content"><multiline label="Description">Enter your description</multiline></div>
                            </td>
                        </tr>
                    </tbody></table>
                </layout>
                                    
                <layout label="Text with image">
                    <table class="w140" width="140" cellpadding="0" cellspacing="0" border="0">
                        <tbody><tr><td class="w140" width="140" height="15"></td></tr>
                        <tr>
                            <td class="w140" width="140"><p align="left" class="left-column-subhead"><singleline label="Title">Add a title</singleline></p></td>
                        </tr>
                        <tr>
                            <td class="w140" width="140"><img editable="true" label="Image" width="140" class="w140" border="0"></td>
                        </tr>
                        <tr><td class="w140" width="140" height="15"></td></tr>
                        <tr>
                            <td class="w140" width="140"><div align="left" class="left-column-content"><multiline label="Description">Enter your description</multiline></div></td>
                        </tr>
                    </tbody></table>
                </layout>
            </repeater>
            
        </td>
        <td class="w15" width="15" bgcolor="#e8ebf7"></td>
        <td class="w470" width="470" bgcolor="#ffffff" valign="top">
            <table class="w470" width="470" cellpadding="0" cellspacing="0" border="0">
                <tbody><tr><td class="w470" width="470" height="30"></td></tr>
            </tbody></table>
            <table class="w470" width="470" cellpadding="0" cellspacing="0" border="0">
                <tbody><tr>
                    <td class="w30" width="30"></td>
                    <td class="w410" width="410">
                        <repeater>
                                                
                            
                            <layout label="Text only">
                                <table class="w410" width="410" cellpadding="0" cellspacing="0" border="0">
                                    <tbody><tr>
                                        <td class="w410" width="410">
                                            <p align="left" class="article-title"><singleline repeatertitle="true" label="Article 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="w410" width="410" height="10"></td></tr>
                                </tbody></table>
                            </layout>
                                                
                            
                            <layout label="Text with full-width image">
                                <table class="w410" width="410" cellpadding="0" cellspacing="0" border="0">
                                    <tbody><tr>
                                        <td class="w410" width="410">
                                            <p align="left" class="article-title"><singleline repeatertitle="true" label="Article Title">Add a title</singleline></p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="w410" width="410"><img editable="true" label="Image" class="w410" width="410" border="0"></td>
                                    </tr>
                                    <tr><td class="w410" width="410" height="15"></td></tr>
                                    <tr>
                                        <td class="w410" width="410">
                                            <div align="left" class="article-content"><multiline label="Description">Enter your description</multiline></div>
                                        </td>
                                    </tr>
                                    <tr><td class="w410" width="410" height="10"></td></tr>
                                </tbody></table>
                            </layout>
                                                
                            
                            <layout label="Text with right-aligned image">
                                <table class="w410" width="410" cellpadding="0" cellspacing="0" border="0">
                                    <tbody><tr>
                                        <td class="w410" width="410">
                                            <p align="left" class="article-title"><singleline repeatertitle="true" label="Article 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="w220" width="220" 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="w410" width="410" height="10"></td></tr>
                                </tbody></table>
                            </layout>
                                                
                            
                            <layout label="Text with left-aligned image">
                                <table class="w410" width="410" cellpadding="0" cellspacing="0" border="0">
                                    <tbody><tr>
                                        <td class="w410" width="410">
                                            <p align="left" class="article-title"><singleline repeatertitle="true" label="Article Title">Add a title</singleline></p>
                                            <table cellpadding="0" cellspacing="0" border="0" align="left">
                                                <tbody><tr>
                                                    <td><img editable="true" label="Image" class="w220" width="220" 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="w410" width="410" height="10"></td></tr>
                                </tbody></table>
                            </layout>
                                                
                                                
                            
                            <layout label="Image gallery">
                                <table class="w410" width="410" cellpadding="0" cellspacing="0" border="0">
                                    <tbody><tr>
                                        <td class="w195" width="195" valign="top">
                                            <table class="w195" width="195" cellpadding="0" cellspacing="0" border="0">
                                                <tbody><tr>
                                                    <td class="w195" width="195"><img editable="true" label="Image" class="w195" width="195" border="0"></td>
                                                </tr>
                                                <tr><td class="w195" width="195" height="10"></td></tr>
                                                <tr>
                                                    <td class="w195" width="195">
                                                        <div align="left" class="article-content"><multiline label="Description">Enter your description</multiline></div>
                                                    </td>
                                                </tr>
                                                <tr><td class="w195" width="195" height="10"></td></tr>
                                            </tbody></table>
                                        </td>
                                        <td width="20"></td>
                                        <td class="w195" width="195" valign="top">
                                            <table class="w195" width="195" cellpadding="0" cellspacing="0" border="0">
                                                <tbody><tr>
                                                    <td class="w195" width="195"><img editable="true" label="Image" class="w195" width="195" border="0"></td>
                                                </tr>
                                                <tr><td class="w195" width="195" height="10"></td></tr>
                                                <tr>
                                                    <td class="w195" width="195">
                                                        <div align="left" class="article-content"><multiline label="Description">Enter your description</multiline></div>
                                                    </td>
                                                </tr>
                                                <tr><td class="w195" width="195" height="10"></td></tr>
                                            </tbody></table>
                                        </td>
                                    </tr>
                                </tbody></table>
                            </layout>
                        </repeater>
                    </td>
                    <td class="w30" width="30"></td>
                </tr>
            </tbody></table>
        </td>
    </tr>
</tbody></table>
</td></tr>
                <tr>
                    <td class="w640" width="640"><table class="w640" width="640" cellpadding="0" cellspacing="0" border="0">
                        <tbody><tr>
                            <td class="w170" width="170" bgcolor="#e8ebf7" height="15"></td>
                            <td class="w470" width="470" bgcolor="#ffffff" height="15"></td>
                        </tr>
                       </tbody></table></td>
                </tr>
                
                <tr>
                <td class="w640" width="640">
    <table id="footer" class="w640" width="640" cellpadding="0" cellspacing="0" border="0" bgcolor="#B6DAF5">
    <tbody><tr><td class="w30" width="30"></td><td class="w580 h0" width="340" height="30"></td><td class="w0" width="30"></td><td class="w0" width="210"></td><td class="w30" width="30"></td></tr>
        <tr>
            <td class="w30" width="30"></td>
            <td class="w580" width="340" valign="top">
            <span class="hide"><p id="permission-reminder" align="left" class="footer-content-left"><span>This email was sent to [email]because you have previously indicated you are happy to receive emails from Margaret Turton Art, or you have been a customer within the last 2 years.</span></p></span>
            <p align="left" class="footer-content-left"><preferences>Edit your subscription</preferences> | <unsubscribe>Unsubscribe instantly</unsubscribe>
              </p>
            <p align="left" class="footer-content-left"><a href="http://www.factoremail.com" target="_new" class="footer-content-left"><img src="images/factoremail_blacktag_120px.png" alt="FactorEmail" width="120" height="31" vspace="10" border="0" align="absbottom" longdesc="http://www.factoremail.com" /></a></p>
<p class="footer-content-left1"><a href="http://www.factoremail.com" target="_new">FactorEmail.com</a> is a service provided by <a href="http://www.factorestudio.com" target="_new">Facto</a><a href="http://www.factorestudio.com" target="_new">rEstudio Ltd</a>.            </p></td>
            <td class="hide w0" width="30"></td>
            <td class="hide w0" width="210" valign="top">
            <p id="street-address" align="right" class="footer-content-right"><span><a href="http://www.margaretturtonart.co.uk" target="_new">MARGARET TURTON ART</a></span><br>
<span>Eastbourne</span>, <span>East Sussex</span><span><br />
BN22 0JD, UK</span><br>
<span>Tel: 01323 313024<br />
</span><a href="mailto:info@margaretturtonart.co.uk">Email: info@margaretturtonart.co.uk</a><br>
  <span></span><br>
            </p>
<p align="right" class="footer-content-right">&nbsp;</p></td>
            <td class="w30" width="30"></td>
        </tr>
        <tr><td class="w30" width="30"></td><td class="w580 h0" width="340" height="15"></td><td class="w0" width="30"></td><td class="w0" width="210"></td><td class="w30" width="30"></td></tr>
    </tbody></table>
</td>
                </tr>
                <tr><td class="w640" width="640" height="60"></td></tr>
            </tbody></table>
        </td>
    </tr>
</tbody></table></body></html>
roshodgekiss roshodgekiss, 4 years ago

Hi Barbara, I took a look at the code and the good news is that it's fine. After a quick peek at the campaign in your account, I noticed that the content in the left column was causing it to blow out in width, which can only be remedied with a little trial and error with copy, I'm sorry to say. For example, words like 'AGRICULTURAL' may be too long for the layout to handle. To better handle this, I made the following tweaks:

- removed the margins/padding with bullet points in the left column so bullet lists line up with the TOC (and prevent the likelihood of bullet point items ruining the layout)
- reduced the font-size and applied -webkit-text-size-adjust:none; to the left-sidebar for mobile devices only

After these tweaks, here's the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>News and offers from Margaret Turton Art</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; }

td[class=left-sidebar] { font-size: 0.8em; -webkit-text-size-adjust:none; }

 } 
/* 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: #455977; 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="2911" > blocks in email. */
code {
  white-space: normal;
  word-break: break-all;
}
#background-table { background-color: #455977; }
/* 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: #b6daf5; color: #ffffff; }
#top-bar a { font-weight: bold; color: #455977; 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, Geneva, 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: #ffffff; }
.header-content a { font-weight: bold; color: #455977; text-decoration: none; }
#headline p { color: #72a6a6; 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: #72a6a6; text-decoration: none; }
#left-sidebar .toc-item { font-family: Helvetica Neue, Arial, Helvetica, Geneva, sans-serif; font-size: 12px; line-height: 16px; color: #259978; margin-top: 0px; margin-bottom: 6px; }
#left-sidebar .toc-item a { color: #259978; text-decoration: none; }
#left-sidebar .toc-heading { font-family: Helvetica Neue, Arial, Helvetica, Geneva, sans-serif; font-size: 11px; line-height: 15px; color:#06406F; font-weight:bold; }
#left-sidebar .toc-heading a { color: #06406F; text-decoration: none; }
#left-sidebar .left-column-heading { font-family: Helvetica Neue, Arial, Helvetica, Geneva, sans-serif; font-size: 11px; line-height:15px; color: #06406f; font-weight:bold; }
#left-sidebar .left-column-heading a { color: #06406f; text-decoration:none; }
#left-sidebar .left-column-subhead { font-family: Helvetica Neue, Arial, Helvetica, Geneva, sans-serif; font-size: 13px; line-height: 16px; color: #666666; font-weight: bold; margin-top: 0px; margin-bottom: 16px; }
#left-sidebar .left-column-subhead a { color: #666666; text-decoration:none; }
#left-sidebar .left-column-content { font-family: Helvetica Neue, Arial, Helvetica, Geneva, sans-serif; font-size: 12px; line-height: 16px; color: #455977; margin-top: 0px; margin-bottom: 16px; }
#left-sidebar .left-column-content a { color: #259978; text-decoration: none; }
.article-title { font-size: 18px; line-height:24px; color: #999999; font-weight:bold; margin-top:0px; margin-bottom:18px; font-family: Helvetica Neue, Arial, Helvetica, Geneva, sans-serif; }
.article-title a { color: #999999; 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: #444444; margin-top: 0px; margin-bottom: 18px; font-family: Helvetica Neue, Arial, Helvetica, Geneva, sans-serif; }
.article-content a { color: #2E5BA8; 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: #444444; }
.article-content li a { color: #2E5BA8; text-decoration:underline; }
.article-content p {margin-bottom: 15px;}
.footer-content-left { font-size: 12px; line-height: 15px; color: #455977; margin-top: 0px; margin-bottom: 15px; }
.footer-content-left a { color: #455977; font-weight: bold; text-decoration: none; }
.footer-content-right { font-size: 11px; line-height: 16px; color: #455977; margin-top: 0px; margin-bottom: 15px; }
.footer-content-right a { color: #455977; font-weight: bold; text-decoration: none; }
#footer { background-color: #B6DAF5; color: #455977; }
#footer a { color: #455977; text-decoration: none; font-weight: bold; }
#permission-reminder { white-space: normal; }
#street-address { color: #444444; white-space: normal; }
.footer-content-left1 {-webkit-text-size-adjust: none; -ms-text-size-adjust: none; }
.footer-content-left1 {font-size: 12px; line-height: 15px; color: #455977; margin-top: 0px; margin-bottom: 15px; }
.footer-content-right1 {-webkit-text-size-adjust: none; -ms-text-size-adjust: none; }
.footer-content-right1 {font-size: 11px; line-height: 16px; color: #455977; margin-top: 0px; margin-bottom: 15px; }
.header-content1 {-webkit-text-size-adjust: none; -ms-text-size-adjust: none; }
.footer-content-left2 {-webkit-text-size-adjust: none; -ms-text-size-adjust: none; }
.footer-content-right2 {-webkit-text-size-adjust: none; -ms-text-size-adjust: none; }
.footer-content-right2 {font-size: 11px; line-height: 16px; color: #455977; margin-top: 0px; margin-bottom: 15px; }
.header-content2 {-webkit-text-size-adjust: none; -ms-text-size-adjust: none; }

div.left-column-content ul { margin: 0 0 0 1.5em; padding: 0; }
div.left-column-content ul li { margin: 0; padding: 0; }

</style>

</head><body><table width="100%" cellpadding="0" cellspacing="0" border="0" id="background-table">
    <tbody><tr>
        <td align="center" bgcolor="#455977">
            <table class="w640" width="640" cellpadding="0" cellspacing="0" border="0">
                <tbody><tr>
                  <td width="640" height="20" class="w640" style="font-size: xx-small; color: #b6daf5;">Latest creations and news of events from Margaret Turton Art</td></tr>
                
                <tr>
                    <td class="w640" width="640">
                        <table id="top-bar" class="w640" width="640" cellpadding="0" cellspacing="0" border="0" bgcolor="#FFFFFF">
    <tbody><tr>
        <td class="w15" width="15"></td>
        <td class="w325" width="350" valign="middle" align="left">
            <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>Web version</webversion></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"></td>
        <td class="w255" width="255" valign="middle" align="right">
            <table class="w255" width="255" cellpadding="0" cellspacing="0" border="0">
                <tbody><tr><td class="w255" width="255" height="8"></td></tr>
            </tbody></table>
            <table cellpadding="0" cellspacing="0" border="0">
    <tbody><tr>
        
        <td valign="middle"><fblike likeurl="http://www.margaretturtonart.co.uk/"><img src="/csimport/like-glyph_0.png" border="0" width="8" height="14" alt="Facebook icon" =""></fblike></td>
        <td width="3"></td>
        <td valign="middle"><div class="header-content"><fblike likeurl="http://www.margaretturtonart.co.uk/">Like</fblike></div></td>
        
        
        <td class="w10" width="10"></td>
        <td valign="middle"><tweet><img src="/csimport/tweet-glyph_1.png" border="0" width="17" height="13" alt="Twitter icon" =""></tweet></td>
        <td width="3"></td>
        <td valign="middle"><div class="header-content"><tweet>Tweet</tweet></div></td>
        
        
        <td class="w10" width="10"></td>
        <td valign="middle"><forwardtoafriend><img src="/csimport/forward-glyph_2.png" border="0" width="19" height="14" alt="Forward icon" =""></forwardtoafriend></td>
        <td width="3"></td>
        <td valign="middle"><div class="header-content"><forwardtoafriend>Forward</forwardtoafriend></div></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"></td>
    </tr>
</tbody></table>
                        
                    </td>
                </tr>
                <tr>
                <td id="header" class="w640" width="640" align="center" bgcolor="#FFFFFF">
                <div align="center" style="text-align: center"><a href="http://www.margaretturtonart.co.uk"><img src="images/banner-header.093819.jpg" alt="News and offers from Margaret Turton Art" border="0" align="top" class="w640" id="customHeaderImage" style="display: inline" /></a></div></td>
                </tr>
                
                <tr id="twocolumn-content-row"><td class="w640" width="640"><table class="w640" width="640" cellpadding="0" cellspacing="0" border="0">
    <tbody><tr>
        <td class="w15" width="15" bgcolor="#e8ebf7"></td>
        <td id="left-sidebar" class="w140" width="140" bgcolor="#e8ebf7" valign="top" align="left">
            
            <table class="w140" width="140" cellpadding="0" cellspacing="0" border="0">
                <tbody><tr><td class="w140" width="140" height="15"></td></tr>
                <tr>
                    <td class="w140" width="140">
                        <p align="left" class="toc-heading">TABLE OF CONTENTS</p>
                        <tableofcontents>
                            <table cellpadding="0" cellspacing="0" border="0">
                                <tbody><tr>
                                    <td width="3"></td>
                                    <td valign="top"><p align="left" class="toc-item">•</p></td>
                                    <td width="6"></td>
                                    <td valign="top"><p align="left" class="toc-item"><strong><repeatertitle></strong></p></td>
                                </tr>
                            </tbody></table>
                        </tableofcontents>
                    </td>
                </tr>
                <tr><td class="w140" width="140" height="15"></td></tr>
            </tbody></table>
            
            
            <table class="w140" width="140" cellpadding="0" cellspacing="0" border="0">
                <tbody><tr><td class="w140" width="140" height="15"></td></tr>
                <tr>
                    <td class="w140" width="140">
                        <div align="left" class="left-column-heading"><singleline label="Title">NEWS IN BRIEF</singleline></div>
                    </td>
                </tr>
            </tbody></table>
                                
            <repeater>    
                <layout label="Text only">
                    <table class="w140" width="140" cellpadding="0" cellspacing="0" border="0">
                        <tbody><tr><td class="w140" width="140" height="15"></td></tr>
                        <tr>
                            <td class="w140" width="140">
                                <p align="left" class="left-column-subhead"><singleline label="Title">Add a title</singleline></p>
                                <div align="left" class="left-column-content"><multiline label="Description">Enter your description</multiline></div>
                            </td>
                        </tr>
                    </tbody></table>
                </layout>
                                    
                <layout label="Text with image">
                    <table class="w140" width="140" cellpadding="0" cellspacing="0" border="0">
                        <tbody><tr><td class="w140" width="140" height="15"></td></tr>
                        <tr>
                            <td class="w140" width="140"><p align="left" class="left-column-subhead"><singleline label="Title">Add a title</singleline></p></td>
                        </tr>
                        <tr>
                            <td class="w140" width="140"><img editable="true" label="Image" width="140" class="w140" border="0"></td>
                        </tr>
                        <tr><td class="w140" width="140" height="15"></td></tr>
                        <tr>
                            <td class="w140" width="140"><div align="left" class="left-column-content"><multiline label="Description">Enter your description</multiline></div></td>
                        </tr>
                    </tbody></table>
                </layout>
            </repeater>
            
        </td>
        <td class="w15" width="15" bgcolor="#e8ebf7"></td>
        <td class="w470" width="470" bgcolor="#ffffff" valign="top">
            <table class="w470" width="470" cellpadding="0" cellspacing="0" border="0">
                <tbody><tr><td class="w470" width="470" height="30"></td></tr>
            </tbody></table>
            <table class="w470" width="470" cellpadding="0" cellspacing="0" border="0">
                <tbody><tr>
                    <td class="w30" width="30"></td>
                    <td class="w410" width="410">
                        <repeater>
                                                
                            
                            <layout label="Text only">
                                <table class="w410" width="410" cellpadding="0" cellspacing="0" border="0">
                                    <tbody><tr>
                                        <td class="w410" width="410">
                                            <p align="left" class="article-title"><singleline repeatertitle="true" label="Article 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="w410" width="410" height="10"></td></tr>
                                </tbody></table>
                            </layout>
                                                
                            
                            <layout label="Text with full-width image">
                                <table class="w410" width="410" cellpadding="0" cellspacing="0" border="0">
                                    <tbody><tr>
                                        <td class="w410" width="410">
                                            <p align="left" class="article-title"><singleline repeatertitle="true" label="Article Title">Add a title</singleline></p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="w410" width="410"><img editable="true" label="Image" class="w410" width="410" border="0"></td>
                                    </tr>
                                    <tr><td class="w410" width="410" height="15"></td></tr>
                                    <tr>
                                        <td class="w410" width="410">
                                            <div align="left" class="article-content"><multiline label="Description">Enter your description</multiline></div>
                                        </td>
                                    </tr>
                                    <tr><td class="w410" width="410" height="10"></td></tr>
                                </tbody></table>
                            </layout>
                                                
                            
                            <layout label="Text with right-aligned image">
                                <table class="w410" width="410" cellpadding="0" cellspacing="0" border="0">
                                    <tbody><tr>
                                        <td class="w410" width="410">
                                            <p align="left" class="article-title"><singleline repeatertitle="true" label="Article 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="w220" width="220" 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="w410" width="410" height="10"></td></tr>
                                </tbody></table>
                            </layout>
                                                
                            
                            <layout label="Text with left-aligned image">
                                <table class="w410" width="410" cellpadding="0" cellspacing="0" border="0">
                                    <tbody><tr>
                                        <td class="w410" width="410">
                                            <p align="left" class="article-title"><singleline repeatertitle="true" label="Article Title">Add a title</singleline></p>
                                            <table cellpadding="0" cellspacing="0" border="0" align="left">
                                                <tbody><tr>
                                                    <td><img editable="true" label="Image" class="w220" width="220" 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="w410" width="410" height="10"></td></tr>
                                </tbody></table>
                            </layout>
                                                
                                                
                            
                            <layout label="Image gallery">
                                <table class="w410" width="410" cellpadding="0" cellspacing="0" border="0">
                                    <tbody><tr>
                                        <td class="w195" width="195" valign="top">
                                            <table class="w195" width="195" cellpadding="0" cellspacing="0" border="0">
                                                <tbody><tr>
                                                    <td class="w195" width="195"><img editable="true" label="Image" class="w195" width="195" border="0"></td>
                                                </tr>
                                                <tr><td class="w195" width="195" height="10"></td></tr>
                                                <tr>
                                                    <td class="w195" width="195">
                                                        <div align="left" class="article-content"><multiline label="Description">Enter your description</multiline></div>
                                                    </td>
                                                </tr>
                                                <tr><td class="w195" width="195" height="10"></td></tr>
                                            </tbody></table>
                                        </td>
                                        <td width="20"></td>
                                        <td class="w195" width="195" valign="top">
                                            <table class="w195" width="195" cellpadding="0" cellspacing="0" border="0">
                                                <tbody><tr>
                                                    <td class="w195" width="195"><img editable="true" label="Image" class="w195" width="195" border="0"></td>
                                                </tr>
                                                <tr><td class="w195" width="195" height="10"></td></tr>
                                                <tr>
                                                    <td class="w195" width="195">
                                                        <div align="left" class="article-content"><multiline label="Description">Enter your description</multiline></div>
                                                    </td>
                                                </tr>
                                                <tr><td class="w195" width="195" height="10"></td></tr>
                                            </tbody></table>
                                        </td>
                                    </tr>
                                </tbody></table>
                            </layout>
                        </repeater>
                    </td>
                    <td class="w30" width="30"></td>
                </tr>
            </tbody></table>
        </td>
    </tr>
</tbody></table>
</td></tr>
                <tr>
                    <td class="w640" width="640"><table class="w640" width="640" cellpadding="0" cellspacing="0" border="0">
                        <tbody><tr>
                            <td class="w170" width="170" bgcolor="#e8ebf7" height="15"></td>
                            <td class="w470" width="470" bgcolor="#ffffff" height="15"></td>
                        </tr>
                       </tbody></table></td>
                </tr>
                
                <tr>
                <td class="w640" width="640">
    <table id="footer" class="w640" width="640" cellpadding="0" cellspacing="0" border="0" bgcolor="#B6DAF5">
    <tbody><tr><td class="w30" width="30"></td><td class="w580 h0" width="340" height="30"></td><td class="w0" width="30"></td><td class="w0" width="210"></td><td class="w30" width="30"></td></tr>
        <tr>
            <td class="w30" width="30"></td>
            <td class="w580" width="340" valign="top">
            <span class="hide"><p id="permission-reminder" align="left" class="footer-content-left"><span>This email was sent to [email]because you have previously indicated you are happy to receive emails from Margaret Turton Art, or you have been a customer within the last 2 years.</span></p></span>
            <p align="left" class="footer-content-left"><preferences>Edit your subscription</preferences> | <unsubscribe>Unsubscribe instantly</unsubscribe>
              </p>
            <p align="left" class="footer-content-left"><a href="http://www.factoremail.com" target="_new" class="footer-content-left"><img src="images/factoremail_blacktag_120px.png" alt="FactorEmail" width="120" height="31" vspace="10" border="0" align="absbottom" longdesc="http://www.factoremail.com" /></a></p>
<p class="footer-content-left1"><a href="http://www.factoremail.com" target="_new">FactorEmail.com</a> is a service provided by <a href="http://www.factorestudio.com" target="_new">Facto</a><a href="http://www.factorestudio.com" target="_new">rEstudio Ltd</a>.            </p></td>
            <td class="hide w0" width="30"></td>
            <td class="hide w0" width="210" valign="top">
            <p id="street-address" align="right" class="footer-content-right"><span><a href="http://www.margaretturtonart.co.uk" target="_new">MARGARET TURTON ART</a></span><br>
<span>Eastbourne</span>, <span>East Sussex</span><span><br />
BN22 0JD, UK</span><br>
<span>Tel: 01323 313024<br />
</span><a href="mailto:info@margaretturtonart.co.uk">Email: info@margaretturtonart.co.uk</a><br>
  <span></span><br>
            </p>
<p align="right" class="footer-content-right">&nbsp;</p></td>
            <td class="w30" width="30"></td>
        </tr>
        <tr><td class="w30" width="30"></td><td class="w580 h0" width="340" height="15"></td><td class="w0" width="30"></td><td class="w0" width="210"></td><td class="w30" width="30"></td></tr>
    </tbody></table>
</td>
                </tr>
                <tr><td class="w640" width="640" height="60"></td></tr>
            </tbody></table>
        </td>
    </tr>
</tbody></table></body></html>

By the way, you can take screenshots on your iPhone by pressing the on/off button and the home button simultaneously. The screen should momentarily go white and a new picture of your screen should appear in your iPhone's Camera Roll.

Thanks, Barbara! Let us know if there's anything else we can assist with.


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

I have copied the code you sent and set up a new template called 'MTA_newsletter_CM code'
However it does not seem to have made any difference!
Thanks for the tip on screenshots from iphones.  How do I get it into here?!



roshodgekiss roshodgekiss, 4 years ago

Hi Barbara, yes, it's the width of content inside the template that's likely throwing the left column out - if you remove all text, does the left column align properly? I don't want to rewrite your copy :)

To share a screenshot, you have to transfer the photo from your phone and host it on your server. You can then use the [ img ] image.jpg [ /img ] tags (remove the spaces) to display it here. Hope that helps!


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