Re: Help with email HTML Template

Anonymous · ‎01-06-2016

Hello Everyone,

Our old marketing manager created the email templates and I noticed that when they get sent out the emails are basically not wide enough so things like text boxes that are supposed to appear on the side, become shifted around etc. I have no experience with HTML and was wondering if someone could possibly help me resolve the issue for this template. Below is the code and the example email of what I am running into with how narrow the email appears on screens and the box that gets shifted around. Any help is greatly apprecaited! Thanks!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<style>

/* Put desktop styles here */

body { width: 100%; background-color: #ffffff; margin:0; padding:0; -webkit-font-smoothing: antialiased; }

table { border-collapse: collapse; }

* {-webkit-text-size-adjust: none}

@media only screen and (max-width: 479px) {

body[yahoo] { margin-top: 0px !important; padding:0px !important;}

body[yahoo] .deviceWidth { width:98%!important; }

body[yahoo] .tdWidth { width:15px !important; }

/* body[yahoo] .block_td {display: block !important;}

*/ body[yahoo] .ltBlock {width:170% !important; margin-bottom: 15px !important;display: block !important;}

body[yahoo] .rtBlock {width:270% !important; margin-left: -210px !important;display: block !important;}

body[yahoo] #content img { width:80% !important; display:block !important; margin:0 auto !important;}

body[yahoo] .center { text-align: center!important; }

body[yahoo] .title { font-size:20px !important; }

body[yahoo] .bodyText { font-size:15px !important; line-height:28px !important; padding-bottom: 30px !important; }

body[yahoo] .company { display: block !important;}

body[yahoo] .address { display: block !important;}

body[yahoo] .percent_td {width: 98% !important;}

}

</style>

</head>

<tr>

<td>

<tr>

<tr>

</tr>

</table>

</td>

</tr>

<tr>

<td>

<tr>

<tr>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

</table>

<tr>

Title of Email

</div>

</td>

</tr>

</table>

<tr>

</tr>

</table>

<tr>

<td>

<tr>

<tr>

<span style="font-size:18px; color:#5e5d5d;padding:0; margin:0;">Intro title:</span><br /><br />

<span style="font-weight:bold; font-size:24px; color:#5e5d5d">Title of Email</span><br /><br />

Hello {{lead.First Name:default=Sir/Madam}},<br /><br />

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet urna velit. Donec luctus malesuada diam, vitae condimentum metus pretium id. Vestibulum molestie, turpis facilisis scelerisque molestie, lorem nibh porttitor purus, sollicitudin rutrum sem lectus id ligula. Maecenas sapien diam, faucibus viverra condimentum id, viverra sit amet metus. Sed viverra tellus volutpat sapien faucibus lobortis. Donec ligula tellus, lacinia at malesuada nec, pulvinar ut elit. Duis velit justo, feugiat sed mollis a, tristique id felis. Vivamus nunc turpis, aliquet at pulvinar eu, faucibus id justo. Integer gravida tristique ipsum, sit amet posuere nisi facilisis eu. Nulla facilisi. Nam sollicitudin, augue sit amet molestie varius, orci odio cursus arcu, ac eleifend justo dolor nec lectus.<br /><br />

Phasellus sed lacinia nunc. Aliquam neque augue, mollis sit amet molestie quis, ullamcorper id nibh. Curabitur at volutpat erat. Nam in nisi eu augue varius lacinia sed varius ipsum. Morbi pretium est ut est rutrum eu tincidunt nisl congue. Fusce elementum dignissim mi, nec pulvinar libero faucibus ut. Praesent ac suscipit mi. Fusce facilisis aliquam velit nec convallis. Aenean cursus rutrum elit eu rutrum. Suspendisse quis risus ipsum. Quisque euismod velit felis. Proin iaculis risus sit amet magna faucibus commodo. Integer mi turpis, tempus id scelerisque ac, sodales tristique nisl. Suspendisse mattis risus non lorem blandit gravida. Nam euismod libero in lectus venenatis ac sollicitudin dolor lacinia. Fusce quis commodo augue. Nam vitae est quis mauris blandit iaculis sit amet non sem. Morbi interdum pellentesque elit in tincidunt. Quisque condimentum porttitor mattis.

</div>

</td>

</tr>

</table>

<tr>

<tr>

<span style="color:#ffffff; font-size:20px; font-weight:bold;">Column Title</span>

</div>

</td>

</tr>

</table>

<tr>

<tr>

</td>

</tr>

</table>

</td>

<tr>

</td>

</tr>

</table>

</td>

</tr>

</table>

<tr>

<span style="font-weight:bold; color:#5e5d5d;">SubTitle Goes here. </span><br /><br />

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet urna velit. Donec luctus malesuada diam, vitae condimentum metus pretium id. Vestibulum molestie, turpis facilisis scelerisque molestie, lorem nibh porttitor purus, sollicitudin rutrum sem lectus id ligula. Maecenas sapien diam, faucibus viverra condimentum id, viverra sit amet metus. Sed viverra tellus volutpat sapien faucibus lobortis. Donec ligula tellus, lacinia at malesuada nec, pulvinar ut elit. Duis velit justo, feugiat sed mollis a, tristique id felis. Vivamus nunc turpis, aliquet at pulvinar eu, faucibus id justo. Integer gravida tristique ipsum, sit amet posuere nisi facilisis eu. Nulla facilisi. Nam sollicitudin, augue sit amet molestie varius, orci odio cursus arcu, ac eleifend justo dolor nec lectus.

</div>

</td>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

</table>

<tr>

</tr>

</table>

<tr>

</tr>

<tr>

#5e5d5d; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;

-webkit-text-stroke-width: 0px; font-weight: bold;"><br /><br /></span><span style="color: #808080; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align:

center; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; float: none; display: inline !important;">5100 W.

Kennedy Blvd., Suite 430, Tampa, FL 33609</span><br style="color: #5e5d5d; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: center; text-indent: 0px;

text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;" /><span style="color: #808080;"><a style="font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal;

line-height: normal; orphans: auto; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: #808080;" href="http://www.MY_WEBSITE.com/contact-us/" target="_blank">Contact Us</a> <span style="font-family:

Arial, Helvetica, sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;

-webkit-text-stroke-width: 0px; float: none; display: inline !important;">|</span> <a style="font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: center;

text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: #808080;" href="http://www.MY_WEBSITE.com/privacy-policy/" target="_blank">Privacy Policy</a> | <a style="color: #808080;"

href="http://go.MY_WEBSITE.com/UnsubscribePage.html" target="_blank">Unsubscribe</a></span>

</div>

</td>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

</table>

</body>

</html>

Eric_Salamon1 · ‎04-18-2017

In the body the first table width is set to 540, you may want to change it to 600 that may help