How to Send A Complicated Email with Flutter Mailer Package

How to Send A Complicated Email with Flutter Mailer Package - html

I am able to send simple HTML emails with the Mailer package (https://pub.dartlang.org/packages/mailer). As in their example, "<h1>Test</h1>\n<p>Hey! Here's some HTML content</p>"works as a simple HTML text:
final message = new Message()
..from = new Address(username, 'Your name')
..recipients.add('destination#example.com')
..ccRecipients.addAll(['destCc1#example.com', 'destCc2#example.com'])
..bccRecipients.add(new Address('bccAddress#example.com'))
..subject = 'Test Dart Mailer library :: 😀 :: ${new DateTime.now()}'
..text = 'This is the plain text.\nThis is line 2 of the text part.'
..html = "<h1>Test</h1>\n<p>Hey! Here's some HTML content</p>";
But what if I wanna create a complex HTML email? For example stripo.email provides templates with HTML code. How can I pass this HTML code as a string for the ..html parameter for the new Message() method?
Here is the HTML code stripo.email website creates for their template:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="width:100%;font-family:arial, 'helvetica neue', helvetica, sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;padding:0;Margin:0;">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta name="x-apple-disable-message-reformatting">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="telephone=no" name="format-detection">
<title>New email</title>
<!--[if (mso 16)]>
<style type="text/css">
a {text-decoration: none;}
</style>
<![endif]-->
<!--[if gte mso 9]><style>sup { font-size: 100% !important; }</style><![endif]-->
<style type="text/css">
#media only screen and (max-width:600px) {
p,
ul li,
ol li,
a {
font-size: 16px!important
}
h1 {
font-size: 30px!important;
text-align: center
}
h2 {
font-size: 26px!important;
text-align: center
}
h3 {
font-size: 20px!important;
text-align: center
}
h1 a {
font-size: 30px!important
}
h2 a {
font-size: 26px!important
}
h3 a {
font-size: 20px!important
}
.es-menu td a {
font-size: 16px!important
}
.es-header-body p,
.es-header-body ul li,
.es-header-body ol li,
.es-header-body a {
font-size: 16px!important
}
.es-footer-body p,
.es-footer-body ul li,
.es-footer-body ol li,
.es-footer-body a {
font-size: 16px!important
}
.es-infoblock p,
.es-infoblock ul li,
.es-infoblock ol li,
.es-infoblock a {
font-size: 12px!important
}
*[class="gmail-fix"] {
display: none!important
}
.es-m-txt-c,
.es-m-txt-c h1,
.es-m-txt-c h2,
.es-m-txt-c h3 {
text-align: center!important
}
.es-m-txt-r,
.es-m-txt-r h1,
.es-m-txt-r h2,
.es-m-txt-r h3 {
text-align: right!important
}
.es-m-txt-l,
.es-m-txt-l h1,
.es-m-txt-l h2,
.es-m-txt-l h3 {
text-align: left!important
}
.es-m-txt-r img,
.es-m-txt-c img,
.es-m-txt-l img {
display: inline!important
}
.es-button-border {
display: block!important
}
.es-button {
font-size: 20px!important;
display: block!important;
border-width: 10px 0px 10px 0px!important
}
.es-btn-fw {
border-width: 10px 0px!important;
text-align: center!important
}
.es-adaptive table,
.es-btn-fw,
.es-btn-fw-brdr,
.es-left,
.es-right {
width: 100%!important
}
.es-content table,
.es-header table,
.es-footer table,
.es-content,
.es-footer,
.es-header {
width: 100%!important;
max-width: 600px!important
}
.es-adapt-td {
display: block!important;
width: 100%!important
}
.adapt-img {
width: 100%!important;
height: auto!important
}
.es-m-p0 {
padding: 0px!important
}
.es-m-p0r {
padding-right: 0px!important
}
.es-m-p0l {
padding-left: 0px!important
}
.es-m-p0t {
padding-top: 0px!important
}
.es-m-p0b {
padding-bottom: 0!important
}
.es-m-p20b {
padding-bottom: 20px!important
}
.es-mobile-hidden,
.es-hidden {
display: none!important
}
.es-desk-hidden {
display: table-row!important;
width: auto!important;
overflow: visible!important;
float: none!important;
max-height: inherit!important;
line-height: inherit!important
}
.es-desk-menu-hidden {
display: table-cell!important
}
table.es-table-not-adapt,
.esd-block-html table {
width: auto!important
}
table.es-social {
display: inline-block!important
}
table.es-social td {
display: inline-block!important
}
}
#outlook a {
padding: 0;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.es-button {
mso-style-priority: 100!important;
text-decoration: none!important;
}
a[x-apple-data-detectors] {
color: inherit!important;
text-decoration: none!important;
font-size: inherit!important;
font-family: inherit!important;
font-weight: inherit!important;
line-height: inherit!important;
}
.es-desk-hidden {
display: none;
float: left;
overflow: hidden;
width: 0;
max-height: 0;
line-height: 0;
mso-hide: all;
}
</style>
</head>
<body style="width:100%;font-family:arial, 'helvetica neue', helvetica, sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;padding:0;Margin:0;">
<div class="es-wrapper-color" style="background-color:#F6F6F6;">
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" color="#f6f6f6"></v:fill>
</v:background>
<![endif]-->
<table cellpadding="0" cellspacing="0" class="es-wrapper" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;padding:0;Margin:0;width:100%;height:100%;background-repeat:repeat;background-position:center top;">
<tr style="border-collapse:collapse;">
<td valign="top" style="padding:0;Margin:0;">
<table cellpadding="0" cellspacing="0" class="es-content" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;table-layout:fixed !important;width:100%;">
<tr style="border-collapse:collapse;">
<td align="center" style="padding:0;Margin:0;">
<table class="es-content-body" align="center" cellpadding="0" cellspacing="0" width="600" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:transparent;">
<tr style="border-collapse:collapse;">
<td align="left" style="padding:20px;Margin:0;">
<!--[if mso]><table width="560"><tr><td width="356" valign="top"><![endif]-->
<table cellpadding="0" cellspacing="0" class="es-left" align="left" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;float:left;">
<tr style="border-collapse:collapse;">
<td width="356" class="es-m-p0r es-m-p20b" valign="top" align="center" style="padding:0;Margin:0;">
<table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
<td align="left" class="es-infoblock es-m-txt-c" style="padding:0;Margin:0;line-height:120%;font-size:12px;color:#CCCCCC;">
<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:12px;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:120%;color:#CCCCCC;">Use this area to offer a short preview of your email's content.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if mso]></td><td width="20"></td><td width="184" valign="top"><![endif]-->
<table cellpadding="0" cellspacing="0" align="right" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
<td width="184" align="left" style="padding:0;Margin:0;">
<table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
<td align="right" class="es-infoblock es-m-txt-c" style="padding:0;Margin:0;line-height:120%;font-size:12px;color:#CCCCCC;">
<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:12px;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:120%;color:#CCCCCC;"><a target="_blank" href="http://stripo.email" style="-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;font-size:12px;text-decoration:underline;color:#2CB543;">View email in your browser</a></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if mso]></td></tr></table><![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" class="es-content" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;table-layout:fixed !important;width:100%;">
<tr style="border-collapse:collapse;">
<td align="center" style="padding:0;Margin:0;">
<table class="es-content-body" align="center" cellpadding="0" cellspacing="0" width="600" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#FFFFFF;">
<tr style="border-collapse:collapse;">
<td align="left" style="padding:20px;Margin:0;">
<table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
<td width="560" align="center" valign="top" style="padding:0;Margin:0;">
<table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
<td align="left" style="padding:0;Margin:0;padding-bottom:15px;">
<h2 style="Margin:0;line-height:120%;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;font-size:24px;font-style:normal;font-weight:normal;color:#333333;">Welcome to the Stripo 2 Columns Template!</h2>
</td>
</tr>
<tr style="border-collapse:collapse;">
</tr>
<tr style="border-collapse:collapse;">
<td align="left" style="padding:0;Margin:0;padding-top:20px;">
<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:14px;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:150%;color:#333333;">Now it’s the time to insert your own content into it by dragging blocks and structures from the side panel to this template area.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr style="border-collapse:collapse;">
<td align="left" style="Margin:0;padding-top:20px;padding-bottom:20px;padding-left:20px;padding-right:20px;">
<!--[if mso]><table width="560"><tr><td width="270" valign="top"><![endif]-->
<table cellpadding="0" cellspacing="0" class="es-left" align="left" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;float:left;">
<tr style="border-collapse:collapse;">
<td width="270" class="es-m-p20b" align="left" style="padding:0;Margin:0;">
<table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
<td align="left" style="padding:0;Margin:0;">
<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:14px;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:150%;color:#333333;">When your email is ready, you can save it or export using one of available methods: to your MailChimp account or as a pure HTML.</p>
</td>
</tr>
<tr style="border-collapse:collapse;">
<td align="left" style="padding:0;Margin:0;padding-top:20px;">
<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:14px;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:150%;color:#333333;">Currently, our team is working to create customized blocks for you so you could create your emails faster.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if mso]></td><td width="20"></td><td width="270" valign="top"><![endif]-->
<table cellpadding="0" cellspacing="0" class="es-right" align="right" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;float:right;">
<tr style="border-collapse:collapse;">
<td width="270" align="left" style="padding:0;Margin:0;">
<table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
</tr>
<tr style="border-collapse:collapse;">
<td align="center" style="padding:0;Margin:0;padding-top:10px;">
<h3 style="Margin:0;line-height:120%;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;font-size:20px;font-style:normal;font-weight:normal;color:#333333;">Image Title Goes Here</h3>
</td>
</tr>
<tr style="border-collapse:collapse;">
<td align="left" style="padding:0;Margin:0;padding-top:5px;">
<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:14px;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:150%;color:#333333;">You can change the size, layout or link of the downloaded image in the left-hand side menu.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if mso]></td></tr></table><![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" class="es-footer" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;table-layout:fixed !important;width:100%;background-color:transparent;background-repeat:repeat;background-position:center top;">
<tr style="border-collapse:collapse;">
<td align="center" style="padding:0;Margin:0;">
<table class="es-footer-body" align="center" cellpadding="0" cellspacing="0" width="600" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:transparent;">
<tr style="border-collapse:collapse;">
<td align="left" style="padding:0;Margin:0;padding-top:20px;padding-left:20px;padding-right:20px;">
<table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
<td width="560" align="center" valign="top" style="padding:0;Margin:0;">
<table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
<td align="center" style="padding:20px;Margin:0;">
<table border="0" width="75%" height="100%" cellpadding="0" cellspacing="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
<td style="padding:0;Margin:0px 0px 0px 0px;border-bottom:1px solid #CCCCCC;background:none;height:1px;width:100%;margin:0px;"> </td>
</tr>
</table>
</td>
</tr>
<tr style="border-collapse:collapse;">
<td align="center" style="padding:0;Margin:0;padding-top:10px;padding-bottom:10px;">
<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:11px;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:150%;color:#333333;">Your footer info might be placed here</p>
</td>
</tr>
<tr style="border-collapse:collapse;">
<td align="center" style="padding:0;Margin:0;padding-top:10px;padding-bottom:10px;">
<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:11px;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:150%;color:#333333;">© 2018 Your Company name</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" class="es-content" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;table-layout:fixed !important;width:100%;">
<tr style="border-collapse:collapse;">
<td align="center" style="padding:0;Margin:0;">
<table class="es-content-body" align="center" cellpadding="0" cellspacing="0" width="600" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:transparent;">
<tr style="border-collapse:collapse;">
<td align="left" style="padding:0;Margin:0;padding-left:20px;padding-right:20px;padding-bottom:30px;">
<table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
<td width="560" align="center" valign="top" style="padding:0;Margin:0;">
<table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
<td class="es-infoblock" align="center" style="padding:0;Margin:0;line-height:120%;font-size:12px;color:#CCCCCC;">
<a target="_blank" href="http://stripo.email/?utm_source=templates&utm_medium=email&utm_campaign=basic&utm_content=two_columns" style="-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;font-size:12px;text-decoration:underline;color:#2CB543;">
<img src="https://ibwhc.stripocdn.email/content/guids/CABINET_9df86e5b6c53dd0319931e2447ed854b/images/64951510234941531.png" alt="" width="125" style="display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;"> </a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
Which results into:

There are 2 aspects to this question.
How to set the stripo html.
How to adapt an html template. (Modify the content to change parts of the template)
To set the template simply do:
message.html =
'''<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
[... copy the complete template here ...]
</html>'''
Three quotes (''') instead of one quote (') allows text to span multiple lines.
To keep your code clean, you might want to create a new dart file: mail-template.dart and assign the html-template to a variable. Then include this file and assign the variable.
To replace parts of the template I would use .replaceAll on the template.
var nameFromSomeInput = 'Jane Doe';
var yourHtmlTemplate = '<html>Dear {{NAME}}</html>';
message.html = yourHtmlTemplate.replaceAll('{{NAME}}', nameFromSomeInput);
Note that replaceAll is easy and doesn't depend on any additional libraries. It is however slow. Especially if you replace multiple values by calling replaceAll multiple times.
Consider a template engine like: jinja in such cases.

Related

Responsive html newsletter - mobile issues when sending to different email clients

The following code has several issues when sending all Html5 newsletters I coded.
I received footer code from the client, but it seems that it doesn't work more.
Remaining parts of the newsletters works well.
I copied an empty template mail I usually use to code my htmls.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>xxxxxx/title>
<style>
ul {
list-style-position: inside;
padding-left: 0;
}
a {
color: inherit !important;
text-decoration: none !important;
}
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
.content {
width: 100%;
max-width: 600px; !important
}
/* GENERAL STYLE RESETS */
body, #bodyTable { height:100% !important; width:100% !important; margin:0 !important; padding:0 !important; }
table, td { border-collapse:collapse; }
.hyphenate {
/* Careful, this breaks the word wherever it is without a hyphen */
overflow-wrap: break-word;
word-wrap: break-word;
/* Adds a hyphen where the word breaks */
-webkit-hyphens: auto;
-ms-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
/*remove blue links for iOS*/
a[x-apple-data-detectors] {color: inherit !important;text-decoration: none !important;font-size: inherit !important;font-family: inherit !important;font-weight: inherit !important;line-height: inherit !important;}
#media only screen and (max-width: 480px) {
/* MUESTRA ENLACE EN MOVIL */
.bloque{width: 100%; display: block!important; height: 40px!important; vertical-align: middle!important}
.bloque2{width: 100%; display: block!important; vertical-align: middle!important}
.bloque2 table{width: 100% !important;}
table.body {float:left;width:100% !important;padding:0;font-size:13px !important}
.ancho{width:100% !important}
.ancho2{width:100% !important;text-align:center !important}
.ancho3{width:33% !important;margin-bottom:12px !important}
.ancho3_2{width:25% !important;margin-bottom:12px !important}
.anchotlfn{width:26% !important;margin-bottom:12px !important}
.ancho4{width:98% !important}
.anchon{width:50% !important}
.separa{ padding:8px 0 !important}
.iber{margin:20px 0 0 25% !important}
.logo{width:40% !important}
.logo2{width:76% !important}
td.izqui{text-align:left !important}
.verde{width:100% !important;font-size:14px !important}
.gg{width:100% !important;font-size:18px !important}
.verde2{width:100% !important;font-size:13px !important}
.oculto{display:none !important}
.pie{line-height:auto !important;font-size:11px !important}
.pdtop{padding-top:10px!important}
.pdbot{padding-bottom:10px!important}
.pe{width:80% !important;padding-top:3px !important}
.alto{ height:10px !important;}
.centrado{text-align:center !important; padding:5px 0 20px 0 !important;}
.nopad{padding-left: 0px !important}
.izq{text-align:left !important; float:left !important}
}
</style>
</head>
<body bgcolor="#FFFFFF" style="font-family:Arial,Helvetica,sans-serif;font-size:13px;color:#000511">
<!--[if mso]>
<table width="600" border="0" align="center" margin bgcolor="#ffffff" cellpadding="0" cellspacing="0">
<tr>
<td>
<![endif]-->
<table class="content" width="100%" border="0" align="center" bgcolor="#5c881a" cellpadding="0" cellspacing="0" style="margin: 0 auto">
<tr>
<td bgcolor="#FFFFFF"><table width="550" border="0" cellspacing="0" cellpadding="0" class="ancho">
<tr>
<td width="24"> </td>
<td width="502"><table width="75%" border="0" cellspacing="0" cellpadding="0" class="ancho" align="left">
<tr>
<td> </td>
</tr>
<tr>
<td style="color:#262626;font-size:12px;font-family:Arial,Helvetica,sans-serif">Se non riesci a visualizzare correttamente il messaggio, clicca qui</td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="15" class="ancho">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="img/xxx.jpg" width="100%" border="0" alt="a"></td>
</tr>
<tr>
<td><img src="img/bordo-top.gif" width="100%" border="0" style="display: block;"></td>
</tr>
<tr>
<td bgcolor="#FFFFFF">
<table width="100%" border="0" cellspacing="0" cellpadding="45">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="justify" style="color:#5c881a;font-size:16px;font-family:Arial,Helvetica,sans-serif; line-height: 23px; text-align: justify;">test
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><img src="img/bordo.gif" width="100%" border="0" style="display: block;"></td>
</tr>
<tr>
<td>
<br>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr bgcolor="#5d881a">
<td width="160" height="60" valign="middle" bgcolor="#5d881a" class="bloque pdtop"
style="text-align: left; color:#ffffff;font-size:11px;font-family:Arial,Helvetica,sans-serif;">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="43"><img src="img/tel.gif"></td>
<td valign="middle"
style="text-align: left; color:#ffffff;font-size:11px;font-family:Arial,Helvetica,sans-serif;">
xxx xxx xxx</td>
</tr>
</tbody>
</table>
</td>
<td width="140" height="60" valign="middle" bgcolor="#5d881a" class="bloque"
style="text-align: left; width:140px; color:#ffffff;font-size:11px;font-family:Arial,Helvetica,sans-serif">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="43"><img src="img/sito.gif"></td>
<td valign="middle"
style="text-align: left; color:#ffffff;font-size:11px;font-family:Arial,Helvetica,sans-serif;">
<a href="" target="_blank"
style="color: #ffffff; text-decoration: none">xxxxxxxxx.it</a>
</td>
</tr>
</tbody>
</table>
</td>
<td width="255" height="60" valign="middle" bgcolor="#5d881a" class="bloque"
style="text-align: left; width:255px; color:#ffffff;font-size:11px;font-family:Arial,Helvetica,sans-serif" >
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="43"><img src="img/mail.gif"></td>
<td valign="middle"
style="text-align: left; color:#ffffff;font-size:11px;font-family:Arial,Helvetica,sans-serif;">
<a style="color: #ffffff; text-decoration: none"
href="mailto:servizioclienti#iberdrola.it">servizioclienti#xxxxxxxxx.it</a>
</td>
</tr>
</tbody>
</table>
</td>
<td height="60" width="110" valign="middle" bgcolor="#5d881a" class="bloque pdbot"
style="text-align: left; width:110px; color:#ffffff;font-size:11px;font-family:Arial,Helvetica,sans-serif">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="46"><a href="https://www.facebook.com/xxxxxxxxx/"
target="_blank"><img src="img/fb.gif" border="0"></a></td>
<td width="46"><a href="https://twitter.com/xxxxxxxxx" target="_blank"><img
src="img/tw.gif" border="0"></a></td>
<td><a href="https://www.instagram.com/xxxxxxxxx/" target="_blank"><img
src="img/ig.gif" border="0"></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr><td><img src="img/line.gif" width="100%"></td></tr>
<tr><td style="text-align: left; color:#ffffff;font-size:14px;font-family:Arial,Helvetica,sans-serif"><br><br>XXXXX</td></tr>
</table>
</td>
</tr>
</table></td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
<tr>
</table>
<![endif]-->
</body>
</html>
expected mobile visualization screenshot
actual visualization when the mail is sent
Desktop visualization

html code not displayed the same in gmail message as in browser

I have this code that works great to remove the spaces between images but then when I embed it into a gmail message and send it, the receiver gets an email with spaces between images.
Anyone has any idea why it does that into gmail and not in a regular browser?
Thanks
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>img_test</title>
<style type="text/css">
table {
border: none;
border-collapse: collapse;
}
table img {
display: block;
}
</style>
</head>
<body>
<table width="auto" border="0" border-spacing="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td><img src="https://picsum.photos/200" alt="" height="auto" width="100%" /></td>
</tr>
<tr>
<td><img src="https://picsum.photos/200" alt="" height="auto" width="100%" /></td>
</tr>
</tbody>
</table>
</body>
</html>
But if I try the template done by professionals below it works perfectly fine on gmail, its mobile reponsive and no spacing everything is smooth.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" style="width:100%;font-family:Arial, sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;padding:0;Margin:0">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta name="x-apple-disable-message-reformatting">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="telephone=no" name="format-detection">
<title>New Template</title>
<!--[if (mso 16)]>
<style type="text/css">
a {text-decoration: none;}
</style>
<![endif]-->
<!--[if gte mso 9]><style>sup { font-size: 100% !important; }</style><![endif]-->
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG></o:AllowPNG>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<style type="text/css">
#outlook a {
padding:0;
}
.ExternalClass {
width:100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height:100%;
}
.es-button {
mso-style-priority:100!important;
text-decoration:none!important;
}
a[x-apple-data-detectors] {
color:inherit!important;
text-decoration:none!important;
font-size:inherit!important;
font-family:inherit!important;
font-weight:inherit!important;
line-height:inherit!important;
}
.es-desk-hidden {
display:none;
float:left;
overflow:hidden;
width:0;
max-height:0;
line-height:0;
mso-hide:all;
}
[data-ogsb] .es-button {
border-width:0!important;
padding:10px 20px 10px 20px!important;
}
[data-ogsb] .es-button.es-button-1 {
padding:10px 30px!important;
}
#media only screen and (max-width:600px) {p, ul li, ol li, a { line-height:150%!important } h1 { font-size:30px!important; text-align:center; line-height:120%!important } h2 { font-size:26px!important; text-align:center; line-height:120%!important } h3 { font-size:20px!important; text-align:center; line-height:120%!important } .es-header-body h1 a, .es-content-body h1 a, .es-footer-body h1 a { font-size:30px!important } .es-header-body h2 a, .es-content-body h2 a, .es-footer-body h2 a { font-size:26px!important } .es-header-body h3 a, .es-content-body h3 a, .es-footer-body h3 a { font-size:20px!important } .es-menu td a { font-size:16px!important } .es-header-body p, .es-header-body ul li, .es-header-body ol li, .es-header-body a { font-size:16px!important } .es-content-body p, .es-content-body ul li, .es-content-body ol li, .es-content-body a { font-size:16px!important } .es-footer-body p, .es-footer-body ul li, .es-footer-body ol li, .es-footer-body a { font-size:16px!important } .es-infoblock p, .es-infoblock ul li, .es-infoblock ol li, .es-infoblock a { font-size:12px!important } *[class="gmail-fix"] { display:none!important } .es-m-txt-c, .es-m-txt-c h1, .es-m-txt-c h2, .es-m-txt-c h3 { text-align:center!important } .es-m-txt-r, .es-m-txt-r h1, .es-m-txt-r h2, .es-m-txt-r h3 { text-align:right!important } .es-m-txt-l, .es-m-txt-l h1, .es-m-txt-l h2, .es-m-txt-l h3 { text-align:left!important } .es-m-txt-r img, .es-m-txt-c img, .es-m-txt-l img { display:inline!important } .es-button-border { display:block!important } a.es-button, button.es-button { font-size:20px!important; display:block!important; border-width:10px 0px 10px 0px!important } .es-btn-fw { border-width:10px 0px!important; text-align:center!important } .es-adaptive table, .es-btn-fw, .es-btn-fw-brdr, .es-left, .es-right { width:100%!important } .es-content table, .es-header table, .es-footer table, .es-content, .es-footer, .es-header { width:100%!important; max-width:600px!important } .es-adapt-td { display:block!important; width:100%!important } .adapt-img { width:100%!important; height:auto!important } .es-m-p0 { padding:0px!important } .es-m-p0r { padding-right:0px!important } .es-m-p0l { padding-left:0px!important } .es-m-p0t { padding-top:0px!important } .es-m-p0b { padding-bottom:0!important } .es-m-p20b { padding-bottom:20px!important } .es-mobile-hidden, .es-hidden { display:none!important } tr.es-desk-hidden, td.es-desk-hidden, table.es-desk-hidden { width:auto!important; overflow:visible!important; float:none!important; max-height:inherit!important; line-height:inherit!important } tr.es-desk-hidden { display:table-row!important } table.es-desk-hidden { display:table!important } td.es-desk-menu-hidden { display:table-cell!important } .es-menu td { width:1%!important } table.es-table-not-adapt, .esd-block-html table { width:auto!important } table.es-social { display:inline-block!important } table.es-social td { display:inline-block!important } }
</style>
</head>
<body style="width:100%;font-family:Arial, sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;padding:0;Margin:0">
<div class="es-wrapper-color" style="background-color:#F6F6F6">
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" color="#f6f6f6"></v:fill>
</v:background>
<![endif]-->
<table class="es-wrapper" width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;padding:0;Margin:0;width:100%;height:100%;background-repeat:repeat;background-position:center top">
<tr style="border-collapse:collapse">
<td valign="top" style="padding:0;Margin:0">
<table class="es-content" cellspacing="0" cellpadding="0" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;table-layout:fixed !important;width:100%">
<tr style="border-collapse:collapse">
<td align="center" style="padding:0;Margin:0">
<table class="es-content-body" cellspacing="0" cellpadding="0" bgcolor="#ffffff" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#FFFFFF;width:600px">
<tr style="border-collapse:collapse">
<td align="left" style="Margin:0;padding-top:15px;padding-bottom:15px;padding-left:20px;padding-right:20px">
<!--[if mso]><table style="width:560px" cellpadding="0" cellspacing="0"><tr><td style="width:270px" valign="top"><![endif]-->
<table class="es-left" cellspacing="0" cellpadding="0" align="left" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;float:left">
<tr style="border-collapse:collapse">
<td align="left" style="padding:0;Margin:0;width:270px">
<table width="100%" cellspacing="0" cellpadding="0" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
<tr style="border-collapse:collapse">
<td class="es-infoblock" align="left" style="padding:0;Margin:0;line-height:14px;font-size:12px;color:#CCCCCC"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:Arial, sans-serif;line-height:14px;color:#CCCCCC;font-size:12px"><span style="text-align:center"></span>Put your preheader text here<span style="text-align:center"></span></p></td>
</tr>
</table></td>
</tr>
</table>
<!--[if mso]></td><td style="width:20px"></td><td style="width:270px" valign="top"><![endif]-->
<table class="es-right" cellspacing="0" cellpadding="0" align="right" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;float:right">
<tr style="border-collapse:collapse">
<td align="left" style="padding:0;Margin:0;width:270px">
<table width="100%" cellspacing="0" cellpadding="0" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
<tr style="border-collapse:collapse">
<td align="right" class="es-infoblock" style="padding:0;Margin:0;line-height:14px;font-size:12px;color:#CCCCCC"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:Arial, sans-serif;line-height:14px;color:#CCCCCC;font-size:12px">View in browser</p></td>
<table width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
<tr style="border-collapse:collapse">
<td valign="top" align="center" style="padding:0;Margin:0;width:560px">
<table width="100%" cellspacing="0" cellpadding="0" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
<tr style="border-collapse:collapse">
<td align="center" style="padding:0;Margin:0;padding-left:10px;padding-right:10px"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:Arial, sans-serif;line-height:21px;color:#333333;font-size:14px"><span style="font-size:16px"><span style="font-family:'trebuchet ms', helvetica, sans-serif"><span style="line-height:150%">Sign up </span></span>and learn about stocks and hot offers. Also we publish interesting articles every week.</span></p></td>
</tr>
<tr style="border-collapse:collapse">
<td align="center" style="Margin:0;padding-bottom:10px;padding-left:10px;padding-right:10px;padding-top:15px"><span class="es-button-border" style="border-style:solid;border-color:#2cb543;background:#47598b;border-width:0px;display:inline-block;border-radius:30px;width:auto">Sign up with Facebook</span></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr style="border-collapse:collapse">
<td style="padding:0;Margin:0;background-color:#efefef;background-position:left top" bgcolor="#efefef" align="left">
<!--[if mso]><table style="width:600px" cellpadding="0" cellspacing="0"><tr><td style="width:300px" valign="top"><![endif]-->
<table class="es-left" cellspacing="0" cellpadding="0" align="left" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;float:left">
<tr style="border-collapse:collapse">
<td align="left" style="padding:0;Margin:0;width:300px">
<table width="100%" cellspacing="0" cellpadding="0" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
<tr style="border-collapse:collapse">
<td align="center" style="padding:0;Margin:0;font-size:0"><img class="adapt-img" src="https://pzekhx.stripocdn.email/content/guids/CABINET_0e80a7555db07e59a031455280a74c7f/images/2261501079577592.adapt" alt="Palm beach Sydney" title="Palm beach Sydney" width="300" style="display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic"></td>
</tr>
</table></td>
</tr>
</table>
<!--[if mso]></td><td style="width:0px"></td><td style="width:300px" valign="top"><![endif]-->
<table class="es-right" cellspacing="0" cellpadding="0" align="right" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;float:right">
<tr style="border-collapse:collapse">
<td align="left" style="padding:0;Margin:0;width:300px">
<table width="100%" cellspacing="0" cellpadding="0" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
<tr style="border-collapse:collapse">
<td align="left" style="padding:0;Margin:0;padding-top:15px;padding-left:25px;padding-right:25px"><h3 style="Margin:0;line-height:24px;mso-line-height-rule:exactly;font-family:Arial, sans-serif;font-size:20px;font-style:normal;font-weight:bold;color:#333333;text-align:left">Palm beach Sydney</h3></td>
</tr>
<tr style="border-collapse:collapse">
<td align="left" style="padding:0;Margin:0;padding-left:25px;padding-right:25px"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:Arial, sans-serif;line-height:21px;color:#333333;font-size:14px">TO FANS OF EXCURSIONS</p></td>
</tr>
<tr style="border-collapse:collapse">
<td align="left" style="Margin:0;padding-top:15px;padding-bottom:15px;padding-left:25px;padding-right:25px;font-size:0">
<table width="10%" height="100%" cellspacing="0" cellpadding="0" border="0" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
<tr style="border-collapse:collapse">
<td style="padding:0;Margin:0;border-bottom:2px solid #cccccc;background:#FFFFFF none repeat scroll 0% 0%;height:1px;width:100%;margin:0px"></td>
</tr>
</table></td>
</tr>
<tr style="border-collapse:collapse">
<td align="left" style="Margin:0;padding-top:5px;padding-bottom:10px;padding-left:25px;padding-right:25px"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:Arial, sans-serif;line-height:21px;color:#333333;font-size:14px">Palm Beach, or "Palmy", lies at the end of a long peninsula, fringed by surf on one side and tranquil Pittwater on the other.</p></td>
</tr>
</table></td>
</tr>
</table>
<!--[if mso]></td></tr></table><![endif]--></td>
</tr>
<tr style="border-collapse:collapse">
<td style="padding:0;Margin:0;background-color:#efefef;background-position:left top" bgcolor="#efefef" align="left">
<!--[if mso]><table style="width:600px" cellpadding="0" cellspacing="0"><tr><td style="width:300px" valign="top"><![endif]-->
<table class="es-left" cellspacing="0" cellpadding="0" align="left" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;float:left">
<tr style="border-collapse:collapse">
<td align="left" style="padding:0;Margin:0;width:300px">
<table width="100%" cellspacing="0" cellpadding="0" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
<tr style="border-collapse:collapse">
<td align="right" style="padding:0;Margin:0;padding-top:25px;padding-left:25px;padding-right:25px"><h3 style="Margin:0;line-height:24px;mso-line-height-rule:exactly;font-family:Arial, sans-serif;font-size:20px;font-style:normal;font-weight:bold;color:#333333">Best of Paris</h3></td>
</tr>
<tr style="border-collapse:collapse">
<td align="right" style="padding:0;Margin:0;padding-left:25px;padding-right:25px"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:Arial, sans-serif;line-height:21px;color:#333333;font-size:14px">IDEALLY FOR COUPLES</p></td>
</tr>
<tr style="border-collapse:collapse">
<td align="right" style="Margin:0;padding-top:15px;padding-bottom:15px;padding-left:25px;padding-right:25px;font-size:0">
<table width="10%" height="100%" cellspacing="0" cellpadding="0" border="0" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
<tr style="border-collapse:collapse">
<td style="padding:0;Margin:0;border-bottom:2px solid #cccccc;background:#FFFFFF none repeat scroll 0% 0%;height:1px;width:100%;margin:0px"></td>
</tr>
</table></td>
</tr>
<tr style="border-collapse:collapse">
<td align="right" style="Margin:0;padding-top:5px;padding-bottom:10px;padding-left:25px;padding-right:25px"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:Arial, sans-serif;line-height:21px;color:#333333;font-size:14px">This is the favorite place to visit over and over again! No photo or video can capture what you feel when you are next to it or under it.</p></td>
</tr>
</table></td>
</tr>
</table>
<!--[if mso]></td><td style="width:0px"></td><td style="width:300px" valign="top"><![endif]-->
<table class="es-right" cellspacing="0" cellpadding="0" align="right" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;float:right">
<tr style="border-collapse:collapse">
<td align="left" style="padding:0;Margin:0;width:300px">
<table width="100%" cellspacing="0" cellpadding="0" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
<tr style="border-collapse:collapse">
<td align="center" style="padding:0;Margin:0;font-size:0"><img class="adapt-img" src="https://pzekhx.stripocdn.email/content/guids/CABINET_0e80a7555db07e59a031455280a74c7f/images/75111501079553681.png" alt="Paris" title="Paris" width="300" style="display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic"></td>
</tr>
</table></td>
</tr>
</table>
<!--[if mso]></td></tr></table><![endif]--></td>
</tr>
<tr style="border-collapse:collapse">
<td style="padding:0;Margin:0;background-color:#ffffff" bgcolor="#ffffff" align="left">
<table width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
<tr style="border-collapse:collapse">
<td valign="top" align="center" style="padding:0;Margin:0;width:600px">
<table width="100%" cellspacing="0" cellpadding="0" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
<tr style="border-collapse:collapse">
<td align="center" style="padding:0;Margin:0;padding-bottom:10px;padding-top:25px"><h2 style="Margin:0;line-height:29px;mso-line-height-rule:exactly;font-family:Arial, sans-serif;font-size:24px;font-style:normal;font-weight:normal;color:#333333">Lorem ipsum</h2></td>
</tr>
<tr style="border-collapse:collapse">
<td align="center" style="Margin:0;padding-top:5px;padding-left:15px;padding-right:15px;padding-bottom:25px"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:Arial, sans-serif;line-height:21px;color:#333333;font-size:14px">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitatio.</p></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr style="border-collapse:collapse">
<td style="Margin:0;padding-top:15px;padding-bottom:15px;padding-left:20px;padding-right:20px;background-position:left top" align="left">
<!--[if mso]><table style="width:560px" cellpadding="0" cellspacing="0"><tr><td style="width:270px" valign="top"><![endif]-->
<table class="es-left" cellspacing="0" cellpadding="0" align="left" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;float:left">
<tr style="border-collapse:collapse">
<td class="es-m-p20b" align="left" style="padding:0;Margin:0;width:270px">
<table width="100%" cellspacing="0" cellpadding="0" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
<tr style="border-collapse:collapse">
<td align="center" style="padding:0;Margin:0;font-size:0"><img class="adapt-img" src="https://pzekhx.stripocdn.email/content/guids/CABINET_3ede03beea8a58107b9bdc4e935fac00/images/82621501164735240.png" alt="Paris" title="Paris" width="270" style="display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic"></td>
</tr>
<tr style="border-collapse:collapse">
<td align="left" style="padding:0;Margin:0;padding-top:5px;padding-bottom:5px"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:Arial, sans-serif;line-height:21px;color:#333333;font-size:14px"><span class="product-name">Best of Paris</span></p></td>
align="center" style="padding:0;Margin:0;line-height:120%;font-size:0;color:#CCCCCC"><a target="_blank" href="https://viewstripo.email/?utm_source=templates&utm_medium=email&utm_campaign=tourism&utm_content=promo_newsletter" style="-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;text-decoration:underline;color:#CCCCCC;font-size:12px"><img src="https://pzekhx.stripocdn.email/content/guids/CABINET_9df86e5b6c53dd0319931e2447ed854b/images/64951510234941531.png" alt width="125" style="display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic"></a></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</div>
</body>
</html>

you can use chrome's developer tool. like just copy your code written within body tag (exclude body ) and go to Gmail, compose and inspect the message section of composing and paste your code there.
Similarly, copy the code written within the style tag(exclude style) and paste into Chrome developer tool.
for more info use reference:embed Html into gmail

You have a basic code and asking why it isn't working as a bit complicated code. It obviously wont. HTML renders differently in emails than in browser because it depends on the email client.
You can use builders like stripo or unlayer or may others and export code for free. Don't copy paste that code into the mailer but test it through https://putsmail.com/

HTML Email Footer Not Rendering Correctly on Desktop (Gmail)

I'm an HTML/CSS newbie and am using a free program called Topol.io to create an HTML footer for an email I'm going to send (in EMMA).
On the Topol site, in Preview mode, it looks correct on both desktop and mobile (2 rows of four buttons across on desktop, one stacked column of buttons on mobile).
However, when I send a test email to myself (in Gmail, on desktop), the buttons are stacked instead of in two rows of 4.
Can someone point out what's wrong with my code? I know it's something to do with the screen size code but I'm not just sure exactly what the change is.
Here's the code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title></title>
<!--[if !mso]><!-- -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
#outlook a {
padding: 0;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
.ExternalClass * {
line-height: 100%;
}
body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,
td {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
p {
display: block;
margin: 13px 0;
}
</style>
<!--[if !mso]><!-->
<style type="text/css">
#media only screen and (max-width:480px) {
#-ms-viewport {
width: 320px;
}
#viewport {
width: 320px;
}
}
</style>
<!--<![endif]-->
<!--[if mso]><xml> <o:OfficeDocumentSettings> <o:AllowPNG/> <o:PixelsPerInch>96</o:PixelsPerInch> </o:OfficeDocumentSettings></xml><![endif]-->
<!--[if lte mso 11]><style type="text/css"> .outlook-group-fix { width:100% !important; }</style><![endif]-->
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">
<style type="text/css">
#import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);
</style>
<!--<![endif]-->
<style type="text/css">
#media only screen and (min-width:480px) {
.mj-column-per-25 {
width: 25% !important;
}
}
</style>
</head>
<body style="background: #FFFFFF;">
<div class="mj-container" style="background-color:#FFFFFF;">
<!--[if mso | IE]> <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;"> <tr> <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"> <![endif]-->
<table role="presentation" cellpadding="0" cellspacing="0" style="background:#7784C3;font-size:0px;width:100%;" border="0">
<tbody>
<tr>
<td>
<div style="margin:0px auto;max-width:600px;">
<table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;" align="center" border="0">
<tbody>
<tr>
<td style="text-align:center;vertical-align:top;direction:ltr;font-size:0px;padding:26px 0px 26px 0px;">
<!--[if mso | IE]> <table role="presentation" border="0" cellpadding="0" cellspacing="0"> <tr> <td style="vertical-align:top;width:150px;"> <![endif]-->
<div class="mj-column-per-25 outlook-group-fix" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
<tbody>
<tr>
<td style="word-wrap:break-word;font-size:0px;padding:11px 0px 11px 0px;padding-top:10px;padding-left:25px;" align="center">
<table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:separate;" align="center" border="0">
<tbody>
<tr>
<td style="border:none;border-radius:24px;color:#fff;cursor:auto;padding:10px 25px;" align="center" valign="middle" bgcolor="#ff2166"><a href="http://www.bubblesacademy.com/new-parent-baby/" style="text-decoration:none;background:#ff2166;color:#fff;font-family:Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-size:16px;font-weight:normal;line-height:120%;text-transform:none;margin:0px;"
target="_blank">Programs</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="word-wrap:break-word;font-size:0px;padding:11px 0px 11px 0px;padding-top:10px;padding-left:25px;" align="center">
<table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:separate;" align="center" border="0">
<tbody>
<tr>
<td style="border:none;border-radius:24px;color:#fff;cursor:auto;padding:10px 25px;" align="center" valign="middle" bgcolor="#ff2166"><a href="http://www.bubblesacademy.com/contact-us/" style="text-decoration:none;background:#ff2166;color:#fff;font-family:Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-size:16px;font-weight:normal;line-height:120%;text-transform:none;margin:0px;"
target="_blank">Contact</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]> </td><td style="vertical-align:top;width:150px;"> <![endif]-->
<div class="mj-column-per-25 outlook-group-fix" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
<tbody>
<tr>
<td style="word-wrap:break-word;font-size:0px;padding:11px 0px 11px 0px;padding-top:10px;padding-left:25px;" align="center">
<table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:separate;" align="center" border="0">
<tbody>
<tr>
<td style="border:none;border-radius:24px;color:#fff;cursor:auto;padding:10px 25px;" align="center" valign="middle" bgcolor="#ff2166"><a href="http://www.bubblesacademy.com/class-calendar/" style="text-decoration:none;background:#ff2166;color:#fff;font-family:Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-size:16px;font-weight:normal;line-height:120%;text-transform:none;margin:0px;"
target="_blank">Schedule</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="word-wrap:break-word;font-size:0px;padding:11px 0px 11px 0px;padding-top:10px;padding-left:25px;" align="center">
<table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:separate;" align="center" border="0">
<tbody>
<tr>
<td style="border:none;border-radius:24px;color:#fff;cursor:auto;padding:10px 25px;" align="center" valign="middle" bgcolor="#ff2166"><a href="http://www.bubblesacademy.com/curriculum/" style="text-decoration:none;background:#ff2166;color:#fff;font-family:Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-size:16px;font-weight:normal;line-height:120%;text-transform:none;margin:0px;"
target="_blank">Preschool</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]> </td><td style="vertical-align:top;width:150px;"> <![endif]-->
<div class="mj-column-per-25 outlook-group-fix" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
<tbody>
<tr>
<td style="word-wrap:break-word;font-size:0px;padding:11px 0px 11px 0px;padding-top:10px;padding-left:25px;" align="center">
<table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:separate;" align="center" border="0">
<tbody>
<tr>
<td style="border:none;border-radius:24px;color:#fff;cursor:auto;padding:10px 25px;" align="center" valign="middle" bgcolor="#ff2166"><a href="http://www.bubblesacademy.com/class-calendar/" style="text-decoration:none;background:#ff2166;color:#fff;font-family:Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-size:16px;font-weight:normal;line-height:120%;text-transform:none;margin:0px;"
target="_blank">Events</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="word-wrap:break-word;font-size:0px;padding:11px 0px 11px 0px;padding-top:10px;padding-left:25px;" align="center">
<table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:separate;" align="center" border="0">
<tbody>
<tr>
<td style="border:none;border-radius:24px;color:#fff;cursor:auto;padding:10px 25px;" align="center" valign="middle" bgcolor="#ff2166"><a href="http://www.bubblesacademy.com/what-we-do/" style="text-decoration:none;background:#ff2166;color:#fff;font-family:Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-size:16px;font-weight:normal;line-height:120%;text-transform:none;margin:0px;"
target="_blank">About Us</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]> </td><td style="vertical-align:top;width:150px;"> <![endif]-->
<div class="mj-column-per-25 outlook-group-fix" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
<tbody>
<tr>
<td style="word-wrap:break-word;font-size:0px;padding:11px 0px 11px 0px;padding-top:10px;padding-left:25px;" align="center">
<table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:separate;" align="center" border="0">
<tbody>
<tr>
<td style="border:none;border-radius:24px;color:#fff;cursor:auto;padding:10px 25px;" align="center" valign="middle" bgcolor="#ff2166"><a href="http://www.bubblesacademy.com/birthdays/" style="text-decoration:none;background:#ff2166;color:#fff;font-family:Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-size:16px;font-weight:normal;line-height:120%;text-transform:none;margin:0px;"
target="_blank">Parties</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="word-wrap:break-word;font-size:0px;padding:11px 0px 11px 0px;padding-top:10px;padding-left:25px;" align="center">
<table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:separate;" align="center" border="0">
<tbody>
<tr>
<td style="border:none;border-radius:24px;color:#fff;cursor:auto;padding:10px 25px;" align="center" valign="middle" bgcolor="#ff2166"><a href="http://www.bubblesacademy.com/blog/" style="text-decoration:none;background:#ff2166;color:#fff;font-family:Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-size:17px;font-weight:normal;line-height:120%;text-transform:none;margin:0px;"
target="_blank">Blog</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]> </td></tr></table> <![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<!--[if mso | IE]> </td></tr></table> <![endif]-->
Thank you in advance!!

How do I make title of cell left aligned but center the rest of content?

I have two side by side table cells which stack when triggered by a media query for a HTML newsletter. I want the headlines "Be Ready" and "Stay Organized" to left align when the responsive code fires but the "margin: 0px auto" causes all of the content to center. Is there a way to get these to stay left aligned? If I move them out of the table data cell from the rest of the content, everything messes up.
The "Stay Organized" and "Be Ready" headlines are centered when the code is responsive. I need them left aligned instead.
This is what it's supposed to look like on mobile: http://imgur.com/vT3XhJ6
Any help is appreciated.
<!DOCTYPE html>
<!--
-->
<html lang="en">
<head><META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"><META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"><META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
table td {border-collapse:collapse;}
table[class=tblPreHeaderLinks] {
width: 100% !important;
height: 25px !important;
clear: both !important;
float: none !important;
}
.appleLinks2 a {
color:#333333 !important;
text-decoration: none !important;
}
/* CLIENT-SPECIFIC STYLES */
#outlook a{padding:0;} /* Force Outlook to provide a "view in browser" message */
.ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing */
body, table, td, a{-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;} /* Prevent WebKit and Windows mobile changing default text sizes */
table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up */
img{-ms-interpolation-mode:bicubic;} /* Allow smoother rendering of resized image in Internet Explorer */
/* RESET STYLES */
body{margin:0; padding:0;}
img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
table{border-collapse:collapse !important;}
body{height:100% !important; margin:0; padding:0; width:100% !important;}
/* iOS BLUE LINKS */
.appleBody a {color:#68440a; text-decoration: none;}
.appleFooter a {color:#999999; text-decoration: none;}
/* MOBILE STYLES */
#media screen and (max-width: 525px) {
body[yahoo] .block_td {display: block;}
.appleLinks2 a {
color:#545861 !important;
text-decoration: none !important;
}
body {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
div[class="mobilecontent"]{
display: block !important;
max-height: none !important;
}
/* ALLOWS FOR FLUID TABLES */
table[class="wrapper"]{
width:100% !important;
}
/* USE THESE CLASSES TO HIDE CONTENT ON MOBILE */
td[class="mobile-hide"]{
display:none;}
img[class="mobile-hide"]{
display: none !important;
}
img[class="img-max"]{
max-width: 100% !important;
width: 100% !important;
height:auto !important;
}
a.learnMore {
display: block;
text-align: center;
}
/* UTILITY CLASSES FOR ADJUSTING PADDING ON MOBILE */
td[class="section-padding"]{
padding: 10px 15px 5px 15px !important;
}
/* FULL-WIDTH TABLES */
table[class="responsive-table"]{
width:100%!important;
}
td[class="weatherTEXT"]{
font-size: 23px !important;
line-height: 27px !important;
}
td[class="weatherTEXT2"]{
font-size: 17px !important;
line-height: 21px !important;
}
}
</style>
</head>
<body yahoo="fix" style="margin: 0; padding: 0;" bgcolor="#f6f4f5">
<style type="text/css">
body { width: 100% !important; }
</style>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="wrapper" style="border:1px solid #e2e0e0;">
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" width="640" class="wrapper" bgcolor="#f6f4f5">
<tr>
<td align="center">
<!--BODY-->
<table border="0" cellpadding="0" cellspacing="0" width="640" class="wrapper" bgcolor="#f6f4f5" align="center">
<tbody><tr>
<td width="640" align="center" bgcolor="#ffffff" class="section-padding" >
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td bgcolor="#ffffff" align="center" style="padding: 5px 0px 5px 0px;" class="section-padding">
<table border="0" cellpadding="0" cellspacing="0" width="640" class="responsive-table" align="center">
<tbody>
<tr><!--MOVABLE INK-->
<td>
<table border="0" cellpadding="0" cellspacing="0" width="640" class="wrapper" bgcolor="#ffffff" align="center">
<tbody><tr>
<td style="padding: 15px 15px 5px 15px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" width="290" class="block_td" style="margin:0px auto;">
<table cellpadding="0" cellspacing="0" border="0" >
<tr>
<td align="left" style="font-family: Ariel, Arial, Helvetica, sans-serif; font-size: 22px; line-height: 26px; color:#002663;padding:0px 0px 25px 0px;" colspan="2">
<b>Be Ready.</b>
</td>
</tr>
<td rowspan="3" valign="top" width="57" style="padding-right:10px;;">
<img src="http://image.email-libertymutual.com/lib/fe6a15707464047f7c1c/m/1/CatAuto-Phone-35x73.jpg" width="35" height="73" alt="House getting hit by a fallen tree" border="0">
</td>
<td valign="top" align="left">
<table cellpadding="0" cellspacing="0" border="0" style="padding: -5px 0px 0px 0px;">
<tr>
<td style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#333333; line-height:17px; padding-left:0px;">
<b>Download our app:</b>
</td>
</tr>
<tr>
<td valign="top" style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;">
<table cellpadding="2" cellspacing="2" border="0">
<tr>
<td style="valign="top">•</td>
<td style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;">Take pictures of damage</td>
</tr>
<tr>
<td valign="top">•</td>
<td style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;">Submit your claim</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style=" padding-top:2px;padding-bottom:35px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td class="mobile-hide">
<img src="http://www.movable-ink-7850.com/p/rp/aa8600496aa4ae32.png?MM_webID=%%WebID%%" alt="House getting hit by a fallen tree">
</td>
</tr>
<tr>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td style="padding-right:35px;">
<!--[if !mso 9]><!-->
<div class="mobilecontent" style="mso-hide:all;display:none;max-height:0px;overflow:hidden;" align="center">
<img src="http://www.movable-ink-7850.com/p/rp/aa8600496aa4ae32.png?MM_webID=%%WebID%%" border="0" alt="House getting hit by a fallen tree">
</div>
<!--<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td valign="top" width="290" class="block_td" style="margin:auto;">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-family: Ariel, Arial, Helvetica, sans-serif; font-size: 22px; line-height: 26px; color:#002663;padding:0px 0px 25px 0px;" colspan="2">
<b>Stay Organized.</b>
</td>
</tr>
<tr>
<td rowspan="3" valign="top" width="60" style="padding-right:10px;">
<img src="http://image.email-libertymutual.com/lib/fe6a15707464047f7c1c/m/1/CatAuto-Icon-Devices-50x50.jpg" alt="" border="0">
</td>
<td valign="top" align="left">
<table cellpadding="0" cellspacing="0" border="0" style="padding: -5px 0px 0px 0px;">
<tr>
<td style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#333333; line-height:17px; padding-left:0px;">
<b>Visit eService today:</b>
</td>
</tr>
<tr>
<td valign="top" style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;">
<table cellpadding="2" cellspacing="2" border="0">
<tr>
<td valign="top">•</td>
<td style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;"><span class="appleLinks2">24/7 access</span></td>
</tr>
<tr>
<td valign="top">•</td>
<td style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;">Manage your policy online</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding-top:2px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td class="mobile-hide">
<img src="http://image.email-libertymutual.com/lib/fe6a15707464047f7c1c/m/1/CatAuto-Button-Sign-In-70x19.jpg">
</td>
</tr>
<tr>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td style="padding-top: 30px; padding-right:40px;">
<!--[if !mso 9]><!-->
<div class="mobilecontent" style="mso-hide:all;display:none;max-height:0px;overflow:hidden;" align="center">
<a href="https://www.libertymutual.com/home-insurance/home-coverages-and-benefits/home-insurance-benefits/property-replacement-service?MM_webID=%%WebID%%"><img src="http://image.email-libertymutual.com/lib/fe6a15707464047f7c1c/m/1/CatAuto-Button-Sign-In-139x38.jpg" width="139" height="38" border="0" alt="House getting hit by a fallen tree">
</div>
<!--<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td style="padding: 15px 15px 20px 15px;" class="tdLine">
<table width="100%" align="center" cellpadding="0" cellspacing="0" class="tblLine">
<tr>
<td style="line-height:1px; font-size:1px; background-color:#f6f4f5" class="tdLineActual"> </td>
</tr>
</table> <!-- tblLine -->
</td> <!-- tdLine -->
</tr>
</tbody></table>
</td>
</tr><!--END OF MOVABLE INK-->
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table><!--END OF BODY-->
</td>
</tr>
</table>
</td>
</tr>
</table><!--END OF CONTAINER-->
</body>
</html>

However i dont recommend to use nested tables but for your structure added one more table for desired results: demo
<table width="80%" border="0" align="center" cellspacing="0" cellpadding="0">

Media queries for tables using csss

HTML Code
<div style="background-color: #e4e4e4">
<table align="center" border="0" cellpadding="0" cellspacing="0" class=
"table" width="600">
<tr>
<td class="cell">
<table border="0" cellpadding="0" cellspacing="0" style=
"background-color: #FFFFFF" width="100%">
<tr>
<td>
<table>
<tr>
<td><span style="font-size: 10px;color:#666666">If this email
doesn't display properly you can view it in your web
browser<a href="http://www.worldtravelhub.com.au" style=
"text-decoration:underline;color:blue;" target=
"_blank">www.worldtravelhub.com.au</a></span></td>
</tr>
</table>
<table align="center" border="0" cellpadding="10" cellspacing="0"
class="w100">
<tr>
<td><img border="0" height="108" src=
"images/high_quality_logo_wth.png" style="display: block"
width="500"></td>
</tr>
</table>
<table align="right" border="0" cellpadding="10" cellspacing="0"
class="w100">
<tr>
<td align="right" class="w100">
<!--<font face="Arial, Helvetica, sans-serif" color="#333333" style="font-size:22px"><strong>WorldTravelHub</strong></font><br>
<font face="Arial, Helvetica, sans-serif" color="#666666" style="font-size:18px">Newsletter
</font>--></td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style=
"background-color: #FFFFFF" width="100%">
<tr>
<td>
<table align="left" border="0" cellpadding="10" cellspacing="0"
class="w100" width="290">
<!--<tr>
<td class="w100"><div class="left_align" face="Arial, Helvetica, sans-serif" color="#666666" style="font-size:12px"><font face="Arial, Helvetica, sans-serif" color="#333333" style="font-size:11px"><strong>We'll get you the CHEAPEST flights to the</strong></font>
<font><span style="color:#ff5313;font-size:29px;">Indian Subcontinent </span></font>
</div>
</td>
</tr>-->
</table>
<table align="right" border="0" cellpadding="10" cellspacing="0"
class="w100" width="290">
<!-- <tr>
<td class="w100">
<img class="stamp" src="images/stamp.png" alt="CHEAPEST GAURANTEE" />
</td>
</tr>-->
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<!--<img src="images/600.png" border="0" style="display:block">-->
<div class="bgimg">
<p class="cheapest"><span class="bold">We'll get you the
CHEAPEST flights to the</span><br>
<span class="indsub">Indian Subcontinent</span></p>
</div>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style=
"background-color: #fff" width="100%">
<tr>
<td>
<table align="left" border="0" cellpadding="10" cellspacing="0"
class="w100" width="100%">
<tr>
<td class="w100"><span class="checkout-price"><span style=
"font-size:10px;">FROM</span> $850*
<!--<sup style="font-size:8px;margin-top:5px;">From</sup><sub>$850*</sub>--></span></td>
</tr>
</table>
<table align="right" border="0" cellpadding="10" cellspacing="0"
class="w100" width="290">
<tr>
<td class="w100">
<!--<font face="Arial, Helvetica, sans-serif" color="#666666" style="font-size:12px"><font face="Arial, Helvetica, sans-serif" color="#333333" style="font-size:14px"><strong>Lorem ipsum dolor sit amet</strong></font>-->
<div style="text-align: center; margin-right: 30px;">
<span style=
"color: #e62529; font-size: 20px; font-weight: bold;">Toll
Free: 1800 984 045</span><br>
<span style=
"font-size: 11px; letter-spacing: 2px;">info#worldtravelhub.com.au</span><br>
<span style=
"font-size: 11px; letter-spacing: 1px;">www.worldtravelhub.com.au</span>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style=
"background-color: white" width="100%">
<tr>
<td>
<table align="center" border="0" cellpadding="10" cellspacing="0"
class="w100" width="100%">
<tr>
<td class="w100">
<p style="text-align: center;"><span style=
"font-size: 22px;color:#e62529;letter-spacing:3px;font-weight:bold;">
Book online <span style="color:#000;">24/7</span> at
worldtravelhub.com.au</span><br>
<span style="font-size:8px;">*A Verifiable written quote
from another Australian registered travel businesses must
be aproved and fare quoted must be generally avaliable to
the public in the market and must be for the same date,seat
class,fare category and airline and given to us before we
make a booking for the customer.The quote must be for
booked fares originating in Australia to Indian
subcontinent.Lics No <span style=
"font-weight:bold;">2TA6049</span></span></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style=
"background-color: #888888" width="100%">
<tr>
<td>
<table align="left" border="0" cellpadding="10" cellspacing="0"
class="w100" width="290">
<tr>
<td class="w100"><strong>WorldTravelHub</strong><br>
Suite 4, 2 Kendall St,<br>
Harris Park NSW 2150</td>
</tr>
</table>
<table align="right" border="0" cellpadding="10" cellspacing="0"
class="w100" width="290">
<tr>
<td align="right" class="w100"><strong>Phone:</strong> +61 2
8005 2797<br>
<strong>Fax:</strong>+61 2 8005 4237<br>
<strong>Email:</strong> info#worldtravelhub.com.au</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td>If this email doesn't display properly you can view it in your
web browser<br>
<br></td>
</tr>
</table>
</td>
</tr>
</table>
</div><!--=========-->
CSS Code
body {
background-color:#e4e4e4;
font-family:'PT Sans Narrow',Arial,sans-serif
}
table {
border-collapse:collapse;
mso-table-lspace:0;
mso-table-rspace:0
}
.ExternalClass * {
line-height:100%
}
#media only screen and (max-width: 480px) {
div,p,a,li,td {
-webkit-text-size-adjust:none!important
}
table[class="table"],td[class="cell"] {
width:300px!important
}
img {
display:block!important;
max-width:100%!important
}
[class].hide {
display:none!important
}
[class].w100 {
width:100%!important;
text-align:left!important
}
.cheapest {
margin-left:5px;
font-size:10px;
padding-top:10px;
font-family:'PT Sans Narrow',Arial,sans-serif;
max-width:100%!important
}
.bold {
font-weight:700
}
.indsub {
color:#e62529;
font-size:22px;
font-weight:700
}
.checkout-price {
top:400px
}/*.bgimg {
background-image: url('images/wth_map.jpg');
width: 100%;
background-size: contain;
background-repeat: no-repeat;
height: 0;
padding-bottom: 77%;
background-repeat: no-repeat;
}*/
}
#media only screen and (max-width: 767px) {
div,p,a,li,td {
/*-webkit-text-size-adjust: none !important;*/
}
table[class="table"],td[class="cell"] {
width:300px!important
}
img {
display:block!important;
max-width:100%!important
}
[class].hide {
display:none!important
}
[class].w100 {
width:100%!important;
text-align:left!important
}
.cheapest {
margin-left:5px;
font-size:10px;
padding-top:10px;
font-family:'PT Sans Narrow',Arial,sans-serif;
max-width:100%!important
}
.bold {
font-weight:700
}
.indsub {
color:#e62529;
font-size:22px;
font-weight:700
}
.checkout-price {
top:400px
}
}
.bgimg {
background-image:url(images/wth_map.jpg);
width:100%;
background-size:contain;
background-repeat:no-repeat;
height:0;
padding-bottom:77%;
/* (img-height / img-width * width) */
/* (853 / 1280 * 100) */
background-repeat:no-repeat
}
.checkout-price {
position:absolute;
top:590px;
margin-left:25px;
width:120px;
height:120px;
font:24px/120px Helvetica,Arial,sans-serif;
color:#fff;
text-align:center;
text-shadow:0 -1px 1px rgba(black,.3);
text-indent:-1px;
letter-spacing:-1px;
background:#e54930;
border:1px solid;
border-color:#b33323 #ab3123 #982b1f;
border-radius:60px
}
.checkout-price:before {
content:'';
position:absolute;
top:3px;
bottom:3px;
left:3px;
right:3px;
border:2px solid #f5f8fb;
border-radius:60px
}
.cheapest {
margin-left:80px;
font-size:14px;
padding-top:22px;
font-family:'PT Sans Narrow',Arial,sans-serif
}
.bold {
font-weight:700
}
.indsub {
color:#e62529;
font-size:30px;
font-weight:700
}
From the above code I want to know how can I apply media queries to class Cheapest and checkout-price?
I tried applying simple media queries but it doesn't seem to work I can't find out where am I going wrong.

The problem is you are writing media queries in the beginning. It means first it will check the media query after that it will overwrite by the actual declaration of your class. Two ways you can stop this.
1. Move the media queries to the bottom.
2. Add 'important' keyword in your media queries if you don't want to move bottom.
FIDDE DEMO(I have just moved the media queries to bottom)

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

How to Send A Complicated Email with Flutter Mailer Package - html

Related

Responsive html newsletter - mobile issues when sending to different email clients

html code not displayed the same in gmail message as in browser

HTML Email Footer Not Rendering Correctly on Desktop (Gmail)

How do I make title of cell left aligned but center the rest of content?

Media queries for tables using csss

Categories

Resources