I am struggling with changing the margins of the text in the top of my e-mail's HTML. I need my text to take more space on the left so it is not squeezed in the top right corner and doesn't run for 4 lines. 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></title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="width=320, target-densitydpi=device-dpi" name="viewport" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet" type="text/css" />
<style type="text/css">/* Mobile-specific Styles */
@media only screen and (max-width: 660px) {
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] { 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; }
.article-content, #left-sidebar{ -webkit-text-size-adjust: 90% !important; -ms-text-size-adjust: 90% !important; }
.header-content, .footer-content-left {-webkit-text-size-adjust: 80% !important; -ms-text-size-adjust: 80% !important;}
#customHeaderImage { height: auto;width: 140px !important; line-height: 100%;}
.banner {width:100%;}
.banner-content {width:50px; padding-top:0 !important; padding-bottom: 0 !important; display:none;}
.banner-cont-sm {display:block !important;}
.hidden-sm { display:none;}
.display-sm {display:block !important;}
table {border-spacing:0; border-color:none;}
}
/* Client-specific Styles */
.display-sm {display:none;}
#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. */
body { background-color: #dedede; margin: 0; padding: 0; color: #464646 }
img { 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 blocks in email. */
code {
white-space: normal;
word-break: break-all;
}
#background-table { background-color: #dedede; }
/* 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: #fff; color: #ededed; }
#top-bar a { font-weight: bold; color: #ffffff; 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, td { font-family: 'Source Sans Pro', 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: #000000; }
.header-content a { font-weight: bold; color: #ffffff; text-decoration: none; }
#headline p { color: #444444; font-family: 'Source Sans Pro', sans-serif; font-size: 36px; text-align: center; margin-top:0px; margin-bottom:30px; }
#headline p a { color: #444444; text-decoration: none; }
.article-title { font-size: 18px; line-height:24px; color: #464646; font-weight:bold; margin-top:0px; margin-bottom:18px; font-family: 'Source Sans Pro', sans-serif; }
.article-title a { color: #000000; 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: 'Source Sans Pro', sans-serif; }
.article-content a { color: #20C5BA; 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: #20C5BA; text-decoration:underline; }
.article-content p {margin-bottom: 15px;}
.footer-content-left { font-size: 12px; line-height: 15px; color: #ededed; margin-top: 0px; margin-bottom: 15px; }
.footer-content-left a { color: #ffffff; font-weight: bold; text-decoration: none; }
.footer-content-right { font-size: 11px; line-height: 16px; color: #ededed; margin-top: 0px; margin-bottom: 15px; }
.footer-content-right a { color: #ffffff; font-weight: bold; text-decoration: none; }
#footer { color: #ededed; }
#footer a { color: #392f46; text-decoration: none; }
#permission-reminder { white-space: normal; }
#street-address { color: #b0b0b0; white-space: normal; }
</style>
<!--[if gte mso 9]>
<style _tmplitem="266" >
.article-content ol, .article-content ul {
margin: 0 0 0 24px;
padding: 0;
list-style-position: inside;
}
</style>
<![endif]-->
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" id="background-table" width="100%">
<tbody>
<tr>
<td align="center" style="background-color:#dadada">
<table border="0" cellpadding="0" cellspacing="0" class="w640" style="margin:0 10px;" width="640">
<tbody>
<tr>
<td class="w640" height="20" width="640"></td>
</tr>
<tr>
<td class="w640" width="640">
<table border="0" cellpadding="0" cellspacing="0" class="w640" id="top-bar" width="640">
<tbody>
<tr style="background-color:#fff">
<td class="w15" height="20" width="15"></td>
<td align="left" class="w325" valign="middle" width="350">
<table border="0" cellpadding="0" cellspacing="0" class="w325" width="350">
<tbody>
<tr>
<td class="w325" height="8" width="350"></td>
</tr>
</tbody>
</table>
<div class="header-content"></div>
<table border="0" cellpadding="0" cellspacing="0" class="w325" width="350">
<tbody>
<tr>
<td class="w325" height="8" width="350"></td>
</tr>
</tbody>
</table>
</td>
<td class="w30" width="30"></td>
<td align="right" class="w255" valign="middle" width="255">
<table border="0" cellpadding="0" cellspacing="0" class="w255" width="255">
<tbody>
<tr>
<td class="w255" height="8" width="255"></td>
</tr>
<tr>
<td>
<p style="text-align: right;color: #276CA8;padding: 10px 10px 10px 10px;font-size:10px; font-weight: bold"><em>We are a charity that provides emergency care across Australia. By signining up, you can win $50,000 and help us in saving over 5,000 lives a year. Can't see this e-mail?<br />
<a data-id="577666557" data-title="View it online!" href="{{ocx_mirror_page}}" style="color:#276CA8;font-weight: bold"><u>View it online!</u></a></em></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>width in table are always tricky. a td width not only dependent on the width applied to it but also the width of body and other tds which are sibling to them. So you have to adjust the other tds and inner table widths to give more space to to the text.
<table border="0" cellpadding="0" cellspacing="0" id="background-table" width="100%">
<tbody>
<tr>
<td align="center" style="background-color:#dadada">
<table border="0" cellpadding="0" cellspacing="0" class="w640" style="margin:0 10px;" width="640">
<tbody>
<tr>
<td class="w640" height="20" width="640"></td>
</tr>
<tr>
<td class="w640" width="640">
<table border="0" cellpadding="0" cellspacing="0" class="w640" id="top-bar" width="640">
<tbody>
<tr style="background-color:#fff">
<td class="w15" height="20" width="15"></td>
<td align="left" class="w325" valign="middle" width="150">
<table border="0" cellpadding="0" cellspacing="0" class="w325" width="50">
<tbody>
<tr>
<td class="w325" height="8" width="50"></td>
</tr>
</tbody>
</table>
<div class="header-content"></div>
<table border="0" cellpadding="0" cellspacing="0" class="w325" width="50">
<tbody>
<tr>
<td class="w325" height="8" width="350"></td>
</tr>
</tbody>
</table>
</td>
<td class="w30" width="30"></td>
<td align="right" class="w255" valign="middle" width="1554">
<table border="0" cellpadding="0" cellspacing="0" class="w255" width="555">
<tbody>
<tr>
<td class="w255" height="8" width="255"></td>
</tr>
<tr>
<td>
<p style="text-align: right;color: #276CA8;padding: 10px 10px 10px 10px;font-size:10px; font-weight: bold"><em>We are a charity that provides emergency care across Australia. By signining up, you can win $50,000 and help us in saving over 5,000 lives a year. Can't see this e-mail?<br>
<a data-id="577666557" data-title="View it online!" href="{{ocx_mirror_page}}" style="color:#276CA8;font-weight: bold"><u>View it online!</u></a></em></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
If you don't need a special layout you can remove all widths. All td will automatically adjust according to it's containers.
I've roughly changed the other width and tds and tables. And if you are creating an email template it's good to inline all styles. Most of the email clients ignore styles in headers.