android - Html email looking different in Gmail app -
i'm not used making html emails. of course have start out making responsive 1 in 2 versions of same email. when thought had done clients realised gmail app both android , ios gave email third look. have read gmail strips out header section if try style inline gmail app still makes third look. links images in comment below shows how mobile should , gmail app look. trouble have 3 columns should turn 1 moving image left , header , text right (like mobile image). gmail app shows image, header , text on each line. should - @ best - mobile or @ least desktop version.
any appreciated.
thanks
code:
<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title></title> <style type="text/css"> .readmsgbody {width: 100%; background-color: #ffffff;} .externalclass {width: 100%; background-color: #ffffff;} body {width: 100%; background-color: #ffffff; margin:0; padding:0; -webkit-font-smoothing: antialiased; font-family: georgia, times, serif} table {border-collapse: collapse;} table td { border-collapse: collapse; } h2, p {margin: 0;} h2 {padding-top: 15px;} .img, .text {display: block;} body .devicewidth {width: 680px} @media screen , (max-width: 640px) { body .devicewidth {width: 440px!important; padding:0;} body .center {text-align: center!important;} table.triplet {width: 99% !important; padding-bottom: 20px !important;} .nopadding {padding-left: 0!important;} .img, .text {width: 50%;} .text p {padding-right: 20px;} h2 {padding-top: 0!important;} } @media screen , (max-width: 479px) { body .devicewidth {width: 300px!important; padding:0;} body .center {text-align: center!important;} .img img {width: 140px;} } </style> <!-- targeting windows mobile --> <!--[if iemobile 7]> <style type="text/css"> </style> <![endif]--> </head> <body bgcolor="#ffffff" style="font-family: georgia, times, serif"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="100%" valign="top" bgcolor="#ffffff" style="padding-top: 20px;"> <table class="container devicewidth" width="700" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff"> <tr> <td style="padding: 0 10px 50px;" bgcolor="#ffffff" align="center" class="devicewidth"> <img src="http://placehold.it/680x300" class="devicewidth" border="0" alt=""> <h1 align="left">header 1</h1> <p align="left">lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 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.</p> </td> </tr> <tr> <td class="devicewidth" style="padding: 0;" width="700"> <table class="triplet" width="33%" align="left" style="background: #ffffff; border:1px solid #ffffff;" border="0" cellpadding="0" cellspacing="0"> <tr> <td style="padding: 0; padding-left: 10px; padding-bottom: 20px" class="nopadding"><p style="mso-table-lspace:0;mso-table-rspace:0;"></p> <!--[if ie]> <table width="100%" align="center" cellpadding="0" cellspacing="0" border="0"> <tr> <td> <![endif]--> <table align="left" class="img" border="0" cellpadding="0" cellspacing="0"> <tr> <td><p style="mso-table-lspace:0;mso-table-rspace:0;"><img src="http://placehold.it/210x210" border="0" alt=""></p></td> </tr> </table> <!--[if ie]> </td> </tr> <tr> <td> <![endif]--> <table align="left" class="text" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <h2>offer 1</h2> <p style="padding-bottom: 20px;">lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 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.</p> </td> </tr> </table> <!--[if ie]> </td> </tr> </table> <![endif]--> </td> </tr> </table> <table class="triplet" width="33%" align="left" style="background: #ffffff; border:1px solid #ffffff;" border="0" border="0" cellpadding="0" cellspacing="0"> <tr> <td style="padding: 0; padding-left: 10px; padding-bottom: 20px" class="nopadding"><p style="mso-table-lspace:0;mso-table-rspace:0;"></p> <!--[if ie]> <table width="100%" align="center" cellpadding="0" cellspacing="0" border="0"> <tr> <td> <![endif]--> <table align="left" class="img" border="0" cellpadding="0" cellspacing="0"> <tr> <td><p style="mso-table-lspace:0;mso-table-rspace:0;"><img src="http://placehold.it/210x300" border="0" alt=""></p></td> </tr> </table> <!--[if ie]> </td> </tr> <tr> <td> <![endif]--> <table align="left" class="text" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <h2>offer 2</h2> <p style="padding-bottom: 20px;">lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 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.</p> </td> </tr> </table> <!--[if ie]> </td> </tr> </table> <![endif]--> </td> </tr> </table> <table class="triplet" width="33%" align="left" style="background: #ffffff; border:1px solid #ffffff;" border="0" border="0" cellpadding="0" cellspacing="0"> <tr> <td style="padding: 0; padding-left: 10px; padding-bottom: 20px;" class="nopadding"><p style="mso-table-lspace:0;mso-table-rspace:0;"></p> <!--[if ie]> <table width="100%" align="center" cellpadding="0" cellspacing="0" border="0"> <tr> <td> <![endif]--> <table align="left" class="img" border="0" cellpadding="0" cellspacing="0"> <tr> <td><p style="mso-table-lspace:0;mso-table-rspace:0;"><img src="http://placehold.it/210x100" border="0" alt=""></p></td> </tr> </table> <!--[if ie]> </td> </tr> <tr> <td> <![endif]--> <table align="left" class="text" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <h2>offer 3</h2> <p style="padding-bottom: 20px;">lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 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.</p> </td> </tr> </table> <!--[if ie]> </td> </tr> </table> <![endif]--> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </body> </html>
when use align="left" on tables, floating left in css. gmail doing, floating text table, causing overflow (pop down) below image table.
if want text within tables align, put in <td> within tables instead.
update:
for responsive in html email, try using display:block; toggle technique:
<!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd"> <html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><title></title> <style type="text/css"> @media screen , (max-width: 600px) { .switch { width:100%; display:block; } } </style> </head> <body> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td class="switch" width="50%"> <img alt="" src="http://placehold.it/150x150" width="100%" style="margin: 0; border: 0; padding: 0; display: block;"> </td> <td class="switch" width="50%" valign="top" style="padding:30px;"> text here... </td> </tr> </table> </body></html> this ignored gmail strips style tag, leaving default non-responsive layout.
Comments
Post a Comment