Why the layout is changed when html newsletter sent to recipient? -
my email html code, when sent via mailchimp layers destroyed , different normal. i've used table format still it's not working. i've used basic mailchimp teplate. nothing working. here attached code:
<head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta property="og:title" content="*|mc:subject|*" /> <title>title</title> <style type="text/css"> body{margin:0;padding:0;font-family: 'libre baskerville', serif;}.main{width:600px;margin:0 auto;display:block;overflow:hidden;}img{width:100%}.logo{background:url(img/logo.png) center center no-repeat;min-height:100px;border-bottom:3px #7a7a7a solid}.logo p{margin-top:60px}.title h1{color:#ff4013;font-size:68px;margin-top:15px;text-align: center;margin-bottom:15px}.subtitle p{color:#008cb4;border-top:1px #a8a8a8 solid;border-bottom:1px #a8a8a8 solid;padding-top:15px;padding-bottom:15px;font-size:18px;text-align:center;font-style:italic}.left{float:left;width:36%;background-color:#ebebeb;padding-left:10px;padding-right:10px;text-align:justify}.left p{font-size:13px;line-height:16px}strong{line-height:25px}.left h4{color:#008cb4;border-bottom:1px dotted #008cb4;text-decoration:none}.right{float:right;width:57%;border-left:1px solid #b2b2b2;padding-left:10px}.right h2{color:#0c8cb4;font-size:20px}.right p{line-height:20px;font-size:15px}.right img{width: 100%!important;}.footer p{margin-top:30px;}.footer a{margin-top:30px;clear: both;} @media (max-width: 400px) {.title h1{font-size: 38px;}.right{float:none;clear: both;}.subtitle p{font-size: 14px;text-align: left;}.left{width: 55%;padding-left: 10px;} .left p{font-size: 15px; line-height: 20px;}} </style> </head> <body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0"> <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="backgroundtable"> <tr> <td align="center" valign="top"> <table border="0" cellpadding="0" cellspacing="0" width="600"> <tr> <td valign="top"> <div class="main"> <div class="logo"> <p style="float:left; color:#008cb4;">the bharat army newsletter</p> <p style="float:right; color:#008cb4;">june 2015</p> </div> <div class="title"> <h1>bharat army</h1> </div> <div class="subtitle"> <p>your quarterly newsletter things indian cricket!</p> </div> <div class="left"> <p>the bharat army travelingto india in march 2016 t20 world cup. limited number of seats available join tour , experience world cup</p> </div> <div class="right"> <img src="img/1.png"> <img src="img/2.png"> </div> <div class="footer"> <a style="color:#008cb4; float:left" href="ex.com">www.ex.com</a> <p style="color:#008cb4; float:right">1</p> </div> </div> </td> </tr> </table> <br /> </td> </tr> </table> </body>
how email displays depends on rendering - various clients , platforms have frustratingly inconsistent idiosyncrasies. email clients will, instance, ignore within <head> node, in case make email different.
you mention using mailchimp. recommend 'inbox inspector' service (which powered litmus) can preview how email in various clients.
if don't pay mailchimp, won't able - maybe try using tool such litmus directly instead (it's free bit).
Comments
Post a Comment