Unwanted lines in HTML email in gmail app - html

In am creating a bunch of emails for an email-flow. For some reason I can't find, when I test the email in the GMAIL APP there is some unwanted grey lines at 1px height.
I just can't find out why they are there. It seems that it's only in the GMAIL APP - I am testing using litmus.com
The HTML for the email:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vores 5 bedste råd inden boligkøbet</title>
<meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {border-collapse: collapse;}
</style>
<![endif]-->
<!--[if mso]>
<style> body,table tr,table td,a, span,table.MsoNormalTable { font-family:Arial, Helvetica, sans-serif !important; }
</style>
<!--<![endif]-->
<style type="text/css">
#media screen and (max-width: 525px) {
h1 {
font-size: 30px !important;
}
}
</style>
</head>
<body bgcolor="#3d6e9c" style="padding: 0; margin: 0;">
<div style="background-color:#3d6e9c;">
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" src="http://naborapporten.its-umbraco.dk/emails/bg.jpg" color="#3d6e9c"/>
</v:background>r
<![endif]-->
<table height="100%" width="100%" cellpadding="0" cellspacing="0" border="1">
<tr>
<td valign="top" align="left" background="http://naborapporten.its-umbraco.dk/emails/bg.jpg">
<center>
<!--[if (gte mso 9)|(IE)]><table width="650" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<table cellspacing="0" cellpadding="0" border="0" style="border: none; border-collapse: collapse; width: 100%;">
<tr>
<td background="http://naborapporten.its-umbraco.dk/emails/bg.jpg" align="center" style="font-family: Arial; padding-top: 100px; padding-bottom: 100px; padding-left: 15px; padding-right: 15px;">
<table border="0" align="center" cellspacing="0" cellpadding="0" style="width: 100%; max-width: 650px; border-collapse: collapse; border: none; ">
<tr>
<td height="43" valign="bottom"><img src="http://naborapporten.its-umbraco.dk/emails/top.png" valign="bottom" style="font-family: Arial; max-width: 650px; width: 100%; height: auto; vertical-align: bottom; border-collapse: collapse;"></td>
</tr>
<tr>
<td align="center" bgcolor="#ffffff" style="font-family: Arial; padding-left: 15px; padding-right: 15px; padding-top: 45px; padding-bottom: 45px; border-collapse: collapse;">
<h1 style="color: #707986; font-size: 45px; margin-bottom: 0; mso-line-height-rule: exactly; line-height: 90%;"><b><b>Din Naborapport™</b></b></h1>
<!--[if (gte mso 9)|(IE)]><table width="470" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<table cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; max-width: 470px; width: 100%;">
<tr>
<td align="center" style="color: #707986; font-size: 18px; padding-top: 45px; border-collapse: collapse;"><b>#Model.FullAddress</b></td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
</td>
</tr>
<tr>
<td align="center" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]><table width="470" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<table border="0" cellspacing="0" cellpadding="0" align="center" style="max-width: 470px; width: 100%; border-collapse: collapse;">
<tr>
<td align="center" bgcolor="#ffffff" valign="middle" style="padding-top: 45px; padding-bottom: 45px; padding-left: 15px; padding-right: 15px;"><img src="http://naborapporten.its-umbraco.dk/gfx/email/knap_til_naborapport.png" border="0" style="border: none; max-width: 100%; height: auto;"></td>
</tr>
<tr>
<td align="center" bgcolor="#ffffff">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" bgcolor="#ffffff" style="font-family: Arial; max-width: 470px; width: 100%; padding-left: 15px; padding-right: 15px;">
<h2 style="color: #1fbba7; font-size: 30px; font-weight: bold;">Naborapporten giver dig et unikt indblik i nabolaget</h2>
<table>
<tr>
<td align="center" valign="middle" style="font-size: 18px; color: #5d6573; ">
<p><b>Hvilke typer er dine naboer?</b></p>
<p><b>Hvad er afstanden til skole, indkøb og transport?</b></p>
<p><b>Hvad beskæftiger dine naboer sig med til dagligt?</b></p>
<b>Hvad er prisudviklingen på boliger i området?</b>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
</td>
</tr>
<tr>
<td valign="middle" align="center" bgcolor="#ffffff" style="font-family: Arial; padding-top: 45px; padding-left: 15px; padding-right: 15px; border-collapse: collapse;">
<span style="color: #1fbba7; font-size: 18px; font-weight: bold;">Få gode råd til huskøbet på vores boligunivers</span>
</td>
</tr>
<tr>
<td align="center" bgcolor="#ffffff" style="padding-top: 45px; padding-bottom: 45px; padding-left: 15px; padding-right: 15px; border-collapse: collapse;">
<img src="http://naborapporten.its-umbraco.dk/emails/kvittering/knap_book.png" style="border: none; max-width: 100%; height: auto;" />
</td>
</tr>
<tr>
<td bgcolor="#eeeeee" align="center" valign="middle" style="padding-top: 45px; border-collapse: collapse;">
<img src="http://naborapporten.its-umbraco.dk/emails/logo.png">
</td>
</tr>
<tr>
<td valign="top" style="border-collapse: collapse;"><img src="http://naborapporten.its-umbraco.dk/emails/bund.png" valign="top" alt="" style="max-width: 100%; height: auto;"></td>
</tr>
<tr>
<td height="92" align="center" valign="middle" style="border-collapse: collapse;"><b>Afmeld</b></td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
</center>
</td>
</tr>
</table>
</div>
</body>
</html>


It looks to me like your background color is bleeding through. This is a common problem on iOS devices as well as some other apps. Is there a reason why you're setting a background color on the body and first div tag?


Make table border as "0"
<table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
Hope this will help you!


As Gokul Maha recommends, I'd change the border="1" on line 35 to border="0". But it's odd that a single instance of that would cause three horizontal borders to appear.
Regarding emails previews in Litmus, they are not always 100% accurate due to the way they open an email in their inbox and create a screenshot. I recommend testing this using an actual copy of Gmail app, if you are able to do that. Results may differ. Litmus saves a ton of time, but for the small details it's always good to know how it looks on an actual device running the actual email app.


i recently created a similar Mail with the same problem. In my case I tried to border the whole Mail, wich worked, but it created small borders around img's and some other objects.
To fix this i added style="border: none;" to each first td after the table with the border around. This fixed it for me.
Also try putting the border on a td. The border doesn't seem to show up in some Outlook Versions, if they are on a table.
If you dont want a Border at all, you sould set the border="1" in line 35 to 0.


Hi I fixed this issue by putting bgcolor="#ffffff" style="background-color:#ffffff;" on the body tag and on the td tag and also in every table tag . All the gray lines disappeared from gmail app.

Related

How do I write this complicated email template structure?

This is about an email template with each table containing an item with a picture on the right side and the details on the left side with the name/brand name/ size and so on.
I have tried a bunch of different solutions I have found online but I can't get the structure to be responsive enough for all platforms.
Any resource regarding the structure is helpful. I made a picture to describe what the structure looks like.
Another user pointed out that I could show the last template I tried and a resource I used that didn't work out well.
https://codepen.io/Georgeslatina/pen/gOGzavj
<table role="presentation" cellpadding="0" cellspacing="0" width="580" style="margin: auto;height: 220px; table-layout: fixed; border: solid 1px #efefef; background-color: #fdfdfd; padding: 20px;margin-bottom:28px !important;direction:ltr !important">
<tbody>
<tr>
<td colspan="60%">
<table role="presentation" cellpadding="0" cellspacing="0" style="text-align: right; table-layout: fixed; width: 100%; height: 180px;">
<tbody>
<tr style="width: 100%;height:20%;">
<td colspan="60%" style="">
<div style="word-wrap: break-word;padding-right:12px;font-size:18px"> text2</div>
</td>
<td colspan="5%" style="">
<div style="height: 20px; width: 1px; background-color: black; margin: auto;">
</div>
</td>
<td colspan="35%" style="">
<div style="font-size:20px;word-wrap: break-word;padding-right:22%"> text1</div>
</td>
</tr>
<tr>
<td colspan="44%" style="">
<div style="padding-right:10px">
<span> ₪100 </span>
<span style="padding-left:8px"> מחיר</span>
</div>
</td>
<td colspan="2%" style="">
<div style="height: 20px; width: 1px; background-color: #e6e6e6; margin: auto;">
</div>
</td>
<td colspan="24%" style="">
<div style="padding-right:20%">
<span style="padding-left:8px">L </span>
<span>מידה</span>
</div>
</td>
<td colspan="2%" style="">
<div style="height: 20px; width: 1px; background-color: #e6e6e6; margin: auto;">
</div>
</td>
<td colspan="13%" style="padding-right:8px">
<div style="border-radius:50%; width: 11px; height: 11px; border: 2px solid black; margin-left:65%">
<div style="width: 9px; height: 9px;border-radius:50%; margin:auto; margin-top:1px"></div>
</div>
</td>
<td colspan="11%">
<div style="float:left">צבע</div>
</td>
</tr>
<tr>
<td colspan="100%" style="padding-right:30px;height:30px">
<div style="text-align:right">
<span>
reason
</span>
<span style="text-align:right;font-family:NarkisBlockMF;font-size:18px;font-weight: 550;font-stretch: normal;font-style: normal;line-height: 1.28;letter-spacing: normal;color: #000;"> :סיבת החזרה</span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td colspan="25%" style="position: relative">
<div style="display:block;width:135px; height:180px;text-align: center; font-size: 0; background:url('https://i.natgeofe.com/n/46b07b5e-1264-42e1-ae4b-8a021226e2d0/domestic-cat_thumb_square.jpg') no-repeat center; background-size: cover">
</div>
<div style="
position:absolute;
z-index: 1;
bottom:0;
width: 135px;
height: 24px;
opacity: 0.8;
font-family:NarkisBlockMF;
font-size:17px;
background-color: #000;
color: white;
text-align: center;
line-height: 24px;">
פריט החזרה
</div>
</td>
</tr>
</tbody>
</table>
And the conditional VML in the example down did not work in my tests.
https://stackoverflow.design/email/templates/short-transactional/

Here is a hybrid method of achieving what you have in your image. My code is not dependent on media queries but I have added a class in to make my blocks 100% width in mobile. If that is removed, the row with text3, text2 and text1 will start stacking on their own as it reaches smaller screen size.
I have not put in any pipes/seperators as they can be placed when you add your content in.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Untitled Document</title>
<style type="text/css">
/*not smart phones*/
#media only screen and (max-width:480px) {
.fullWidth{width:100% !important;max-width:100% !important;}
}
</style>
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><!--[if (gte mso 9)|(IE)]>
<table width="700" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" width="700">
<![endif]-->
<!-- start 700 pixel container -->
<table width="700" border="0" align="center" cellpadding="0" cellspacing="0" class="fullWidth" style="max-width:700px;">
<tbody>
<tr>
<td align="center" valign="top" style="text-align: center; vertical-align: top; font-size: 0px; padding: 0px;"><!--[if (gte mso 9)|(IE)]>
<table width="700" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" width="350">
<![endif]-->
<div style="max-width: 349px; width:100%; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top" style="text-align: center; vertical-align: top; font-size: 0px; padding: 0px;"><!--[if (gte mso 9)|(IE)]>
<table width="100%" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" width="175">
<![endif]-->
<div style="max-width: 174px; width:100%; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif;font-size:20px;">text1</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="175">
<![endif]-->
<div style="max-width: 174px; width:100%; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif;font-size:20px;">text2</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--></td>
</tr>
<tr>
<td align="center" valign="top" style="text-align: center; vertical-align: top; font-size: 0px; padding: 0px;"><!--[if (gte mso 9)|(IE)]>
<table width="100%" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" width="116">
<![endif]-->
<div style="max-width: 116px; width:100%; display: inline-block; vertical-align: top;" class="fullWidth">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif;font-size:20px;">text3</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="116">
<![endif]-->
<div style="max-width: 116px; width:100%; display: inline-block; vertical-align: top;" class="fullWidth">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif;font-size:20px;">text2</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="116">
<![endif]-->
<div style="max-width: 116px; width:100%; display: inline-block; vertical-align: top;" class="fullWidth">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif;font-size:20px;">text1</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--></td>
</tr>
<tr>
<td align="center" valign="top" style="text-align: center; vertical-align: top; font-size: 0px; padding: 0px;"><!--[if (gte mso 9)|(IE)]>
<table width="100%" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" width="116">
<![endif]-->
<div style="max-width: 116px; width:100%; display: inline-block; vertical-align: top;" class="fullWidth">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif;font-size:20px;"></td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="116">
<![endif]-->
<div style="max-width: 116px; width:100%; display: inline-block; vertical-align: top;" class="fullWidth">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif;font-size:20px;">text2</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="116">
<![endif]-->
<div style="max-width: 116px; width:100%; display: inline-block; vertical-align: top;" class="fullWidth">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif;font-size:20px;">text1</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--></td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="350">
<![endif]-->
<div style="max-width: 349px; width:100%; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif;font-size:20px;">image</td>
</tr>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif;font-size:20px;">text</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--></td>
</tr>
</tbody>
</table>
<!-- start 700 pixel container -->
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--></td>
</tr>
</table>
</body>
</html>

Dont set your layout in a single table, seperate them into two tables. Table for content and table for image.
<style>
#media screen and (max-width: 600px) {
.module-wrapper, .grid{
width: 100% !important;
}
.grid{
float: none !important;
}
}
</style>
<table class="module-wrapper" cellpadding="0" cellspacing="0" border="0" width="580" align="center">
<tr>
<td>
<!--[if mso]><table cellpadding="0" cellspacing="0" border="0" width="100%" dir="rtl"><tr><td valign="top" dir="ltr"><![endif]-->
<table class="grid" cellpadding="0" cellspacing="0" border="0" width="135" align="right">
<tr>
<td align="center" style="position: relative">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<div style="display:block;width:135px; height:180px;text-align: center; font-size: 0; background:url('https://i.natgeofe.com/n/46b07b5e-1264-42e1-ae4b-8a021226e2d0/domestic-cat_thumb_square.jpg') no-repeat center; background-size: cover">
</div>
<div style="
position:absolute;
z-index: 1;
bottom:0;
width: 135px;
height: 24px;
opacity: 0.8;
font-family:NarkisBlockMF;
font-size:17px;
background-color: #000;
color: white;
text-align: center;
line-height: 24px;">
פריט החזרה
</div>
</td>
</tr>
</table>
</td>
</tr>
</table><!-- #end image table -->
<!--[if mso]></td><td valign="top" dir="ltr"><![endif]-->
<table class="grid" role="presentation" cellpadding="0" cellspacing="0" width="445" align="left">
<tr>
<td colspan="60%">
<table role="presentation" cellpadding="0" cellspacing="0"
style="text-align: right; table-layout: fixed; width: 100%; height: 180px;">
<tbody>
<tr style="width: 100%;height:20%;">
<td colspan="60%" style="">
<div style="word-wrap: break-word;padding-right:12px;font-size:18px"> text2</div>
</td>
<td colspan="5%" style="">
<div style="height: 20px; width: 1px; background-color: black; margin: auto;">
</div>
</td>
<td colspan="35%" style="">
<div style="font-size:20px;word-wrap: break-word;padding-right:22%"> text1</div>
</td>
</tr>
<tr>
<td colspan="44%" style="">
<div style="padding-right:10px">
<span> ₪100 </span>
<span style="padding-left:8px"> מחיר</span>
</div>
</td>
<td colspan="2%" style="">
<div style="height: 20px; width: 1px; background-color: #e6e6e6; margin: auto;">
</div>
</td>
<td colspan="24%" style="">
<div style="padding-right:20%">
<span style="padding-left:8px">L </span>
<span>מידה</span>
</div>
</td>
<td colspan="2%" style="">
<div style="height: 20px; width: 1px; background-color: #e6e6e6; margin: auto;">
</div>
</td>
<td colspan="13%" style="padding-right:8px">
<div style="border-radius:50%; width: 11px; height: 11px; border: 2px solid black; margin-left:65%">
<div style="width: 9px; height: 9px;border-radius:50%; margin:auto; margin-top:1px"></div>
</div>
</td>
<td colspan="11%">
<div style="float:left">צבע</div>
</td>
</tr>
<tr>
<td colspan="100%" style="padding-right:30px;height:30px">
<div style="text-align:right">
<span>
reason
</span>
<span
style="text-align:right;font-family:NarkisBlockMF;font-size:18px;font-weight: 550;font-stretch: normal;font-style: normal;line-height: 1.28;letter-spacing: normal;color: #000;">
:סיבת החזרה</span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table><!-- #end content table -->
<!--[if mso]></td></tr></table><![endif]-->
</td>
</tr>
</table><!-- #end module-wrapper -->
Then use media query to make your table responsive
If you dont want to use media query try using the method from this article
https://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919

I tried to use CSS grid for this
#parent-container {
border: 0.2rem solid black;
padding: 1em;
display: grid;
grid-template-columns: repeat(2, 1fr);
place-content: center;
}
#parent-container img {
width: 100%;
height: auto;
border-radius: 0.3rem;
}
.first-container {
height: 100%;
display: grid;
grid-auto-rows: 1fr;
}
.first-container div:nth-child(1) {
display: grid;
grid-template-columns: repeat(2, 1fr);
place-items: center;
}
.first-container div:nth-child(2) {
display: grid;
grid-template-columns: repeat(3, 1fr);
place-items: center;
}
.first-container div:nth-child(3) {
display: grid;
grid-template-columns: repeat(3, 1fr);
place-items: center;
}
.first-container div>div:not(:last-child) {
border-right: 0.2rem solid black;
}
.first-container div {
display: grid;
gap: 0.5rem;
}
.second-container {
display: grid;
place-items: center;
border: 0.2rem solid black;
padding: 0.5em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="parent-container">
<!-- first container-child -->
<div class="first-container">
<div>
<div>text1</div>
<div>text2</div>
</div>
<div>
<div>text3</div>
<div>text2</div>
<div>text1</div>
</div>
<div>
<div></div>
<div>text2</div>
<div>text1</div>
</div>
</div>
<!-- second container-child -->
<div class="second-container">
<img src="https://avatars.githubusercontent.com/u/87947051?v=4" alt="">
<div>text</div>
</div>
</div>
</body>
</html>

Images is not hiding in Outlook 2016?

I'm trying to create a responsive email HTML, where everything is working fine in browser but not working in outlook. The code snippet is added can anybody help me here?
In outlook: I just want the first section showing in normal windows but I don't know what is happening. The paragraph section is successfully hidden but image is not getting hide.
.show-me{
mso-hide: all;
overflow: hidden;
max-height: 0;
width: 100%;
display: none;
line-height: 0;
visibility: hidden;
}
.show-me img{
mso-hide: all;
overflow: hidden;
max-height: 0;
width: 100%;
display: none !important;
line-height: 0;
visibility: hidden !important;
}
#media only screen and (max-width:480px) {
.show-me{
overflow:visible ;
max-height:auto;
width: 100%;
display: table;
line-height: 0;
visibility: visible;
}
.show-me img{
display : block ;
width: 100%;
height: auto ;
border: 0 ;
}
.outer-table-desktop-only{
display: none;
font-size: 0;
max-height: 0;
line-height: 0;
mso-hide:all;
}
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="container">
<tr>
<td valign="top" bgcolor="#FFFFFF">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="outer-table-desktop-only">
<tr>
<td valign="top" height="300" background="http://msgfocus.com/files/amf_sage/workspace_42/MISC_New/600-600x300.jpg" style="height:300px; background-image:url('http://msgfocus.com/files/amf_sage/workspace_42/MISC_New/600-600x300.jpg'); background-repeat:no-repeat; background-position:center;">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style="display: inline-block; position: absolute; width: 600px; height: 300px; top: 0; left: 0; border: 0; z-index: 1;" src="http://msgfocus.com/files/amf_sage/workspace_42/MISC_New/600-600x300.jpg" />
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="display: inline-block; position: absolute; width: 600px; height: 300px; top: 0; left: 0; border: 0; z-index: 2;">
<v:fill opacity="0%" style="z-index: 1;"/>
<div>
<![endif]-->
<!-- Containing Table -->
<table width="100%" border="0" align="center" cellpadding="15" cellspacing="0">
<tr>
<td width="100%" height="300" align="center" valign="middle">
<!-- Contents -->
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="100%" valign="middle" style="font-size:32px; line-height:1.5em; color : #FFFFFF;"><p style="font-family:Arial, Helvetica, sans-serif; font-size:27px; line-height:1.5em; color:#ffffff;">This is a Email Title</p>
<p style="font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:1.5em; color:#ffffff;">The Third Edition of Houser's best seller emphasizes the importance of being a good consumer of research and teaches readers how to conduct research in practice. Written in an engaging, conversational tone, the book uses concrete examples from professional literature to demonstrate how to effectively evaluate and interpret research articles—without relying on discipline-specific jargon.</p></td>
</tr>
</table> <!-- Contents END -->
</td>
</tr>
</table>
<!-- Containing Table END-->
<!--[if gte mso 9]>
</div></v:fill></v:rect><![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="container">
<tr>
<td valign="top" bgcolor="#FFFFFF">
<table class="show-me" width="100%" cellpadding="0" cellspacing="0" align="center" border="0" bgcolor="#FFFFFF">
<tr>
<td width="100%" valign="top" class="show-me" bgcolor="#FFFFFF"><img src="http://msgfocus.com/files/amf_sage/workspace_42/MISC_New/600-600x300.jpg" alt="Journal Cover" width="600" vspace="0" border="0"></td>
</tr>
<tr>
<td valign="top" class="show-me" bgcolor="#FFFFFF">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="show-me">
<tr>
<td valign="top" bgcolor="#FFFFFF" style="font-family:Arial, Helvetica, sans-serif; font-size:27px; line-height:1em;color:#333333;"><p>This is a Email Title</p>
<p style="font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:1.5em; color:#333333;">The Third Edition of Houser's best seller emphasizes the importance of being a good consumer of research and teaches readers how to conduct research in practice. Written in an engaging, conversational tone, the book uses concrete examples from professional literature to demonstrate how to effectively evaluate and interpret research articles—without relying on discipline-specific jargon.</p></td>
</tr>
</table></td>
</tr>
</table>
</td>
</tr>
</table>

HTML email font size decrease on mobile because of header navigation

All:
When I include a header navigation bar which is made up of inline jpegs in my html email, the fonts in the rest of the email render incredibly small regardless of my media queries. When I remove the header bar they render fine.
So there is something about the way that I have built the header that is causing this weird issue and I have tried every possible (in my mind) permutation and can't find a fix. Help would be much appreciated.
Here are screen shots of the mobile email with and without the header.
https://ibb.co/g1i9vH
https://ibb.co/fy8W9c
And here is my code:
<!-- Helm Email Template -->
<!DOCTYPE html>
<html>
<head>
<title>*|MC:SUBJECT|*</title>
<meta http-equiv="Content-Type" content="text/html; 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">
/* CLIENT-SPECIFIC STYLES */
body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { -ms-interpolation-mode: bicubic; }
/* RESET STYLES */
img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
table { border-collapse: collapse !important; }
body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }
/* iOS BLUE LINKS */
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 QUERIES */
#media screen and (max-width: 480px) {
.mobile-hide {
display: none !important;
}
.mobile-center {
text-align: center !important;
}
.text-resp {
font-size: 14px!important;
}
}
/* ANDROID CENTER FIX */
div[style*="margin: 16px 0;"] { margin: 0 !important; }
</style>
<body style="margin: 0 !important; padding: 0 !important; background-color: #ffffff;" bgcolor="#ffffff">
<!-- HIDDEN PREHEADER TEXT -->
<div style="display: none; font-size: 1px; color: #ffffff; line-height: 1px; font-family: Open Sans, Helvetica, Arial, sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus dolor aliquid omnis consequatur est deserunt, odio neque blanditiis aspernatur, mollitia ipsa distinctio, culpa fuga obcaecati!
</div>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" style="background-color: #ffffff;" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<!-- Start Header -->
<tr>
<td align="center" style="width: background-color: #ffffff;" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;" bgcolor="red" height="30">
<tr>
<td align="center" style="line-height:0px;">
<img style="display:block; line-height:0px; font-size:0px; border:0px; width:99px;" src="https://image.ibb.co/bODCyS/header_menu_men.png" alt="Men">
</td>
<td align="center" style="line-height:0px;">
<img style="display:block; line-height:0px; font-size:0px; border:0px; width:122px;" src="https://image.ibb.co/gSEwQ7/header_menu_women.png" alt="Women">
</td>
<td align="center" style="line-height:0px;">
<img style="display:block; line-height:0px; font-size:0px; border:0px; width: 148px;" src="https://image.ibb.co/gc0357/header_logo.png" alt="Helm">
</td>
<td align="center" style="line-height:0px;">
<img style="display:block; line-height:0px; font-size:0px; border:0px; width: 123px;" src="https://image.ibb.co/iEU7Xn/header_menu_supply.png" alt="Supply">
</td>
<td align="center" style="line-height:0px;">
<img style="display:block; line-height:0px; font-size:0px; border:0px; width: 108px;" src="https://image.ibb.co/nMdedS/header_menu_sale.png" alt="Sale">
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- End Header -->
<!-- Start Spacer -->
<tr>
<td height="40" bgcolor="#ffffff"></td>
</tr>
<!-- End Spacer -->
<!-- Start Section 1: Hero Image -->
<tr>
<td align="center" style="background-color: #ffffff;" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td align="center">
<img style="margin-left: auto; margin-right: auto; text-align: center; display:block; line-height:0px; font-size:0px; border:0px; width: 100%;" src="https://image.ibb.co/iTNSXn/content_image_1.jpg" alt="img">
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- End Section 1: Hero Image -->
<!-- Start Section 2: Proof Point #1 Image -->
<tr>
<td align="center" style="background-color: #ffffff;" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td align="center">
<img style="margin-left: auto; margin-right: auto; text-align: center; display:block; line-height:0px; font-size:0px; border:0px; width: 100%;" src="https://image.ibb.co/bRxrqH/helm_email_1_section_2_img_1.png" alt="img">
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- End Section 2: Proof Point #1 Image -->
<!-- Start Section 2: Proof Point #1 Copy -->
<tr>
<td align="center" style="background-color: #ffffff;" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<p class="text-resp" style="font-family:Georgia, Helvetica, Arial; font-size:16px; color:#3d3d3d; line-height:30px;" mc:edit="Paragraph">
HELM boots don’t complete your look, they make it. Every pair has been designed with simplicity in mind, making them perfect for every style and occasion.
</p>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- End Section 2: Proof Point #1 Copy -->
<!-- Start Section 2: Proof Point #2 Image -->
<tr>
<td align="center" style="background-color: #ffffff;" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td align="center">
<img style="margin-left: auto; margin-right: auto; text-align: center; display:block; line-height:0px; font-size:0px; border:0px; width: 100%;" src="https://image.ibb.co/b1zkjc/helm_email_1_section_2_img_2.png" alt="img">
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- End Section 2: Proof Point #2 Image -->
<!-- Start Section 2: Proof Point #2 Copy -->
<tr>
<td align="center" style="background-color: #ffffff;" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="90%" style=" width: 90%; max-width:400px;">
<tr>
<p class="text-resp" style="width: 90%; max-width:400px; font-family:Georgia, Helvetica, Arial; font-size:16px; color:#3d3d3d; line-height:30px;" mc:edit="Paragraph">
Reliable boots that look good are hard to come by. We combine a timeless aesthetic with the best materials on earth to create boots that are designed to fit your style for years to come.
</p>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- End Section 2: Proof Point #2 Copy -->
<!-- Start Section 2: Proof Point #3 Image -->
<tr>
<td align="center" style="background-color: #ffffff;" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td align="center">
<img style="margin-left: auto; margin-right: auto; text-align: center; display:block; line-height:0px; font-size:0px; border:0px; width: 100%;" src="https://image.ibb.co/hjN2xx/helm_email_1_section_2_img_3.png" alt="img">
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- End Section 2: Proof Point #3 Image -->
<!-- Start Section 2: Proof Point #3 Copy -->
<tr>
<td align="center" style="background-color: #ffffff;" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="90%" style=" width: 90%; max-width:400px;">
<tr>
<p class="text-resp" style="width: 90%; max-width:400px; font-family:Georgia, Helvetica, Arial; font-size:16px; color:#3d3d3d; line-height:30px;" mc:edit="Paragraph">
We want you to love your first pair of HELM boots. We offer free shipping and free exchanges until you find that perfect pair. And of course, returns are on us too.
</p>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- End Section 2: Proof Point #3 Copy -->
<!-- Start Spacer -->
<tr>
<td height="80" bgcolor="#ffffff"></td>
</tr>
<!-- End Spacer -->
<!-- Start Section 3: Video -->
<tr>
<td align="center" style="background-color: #ffffff;" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td align="center">
<img class="g-img" style="margin-left: auto; margin-right: auto; display:block; line-height:0px; font-size:0px; border:0px; width: 100%; max-width: 600px;" src="https://image.ibb.co/huJZCn/content_image_2.jpg" alt="img">
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- End Section 3: Video -->
<!-- Start Spacer -->
<tr>
<td height="40" bgcolor="#ffffff"></td>
</tr>
<!-- End Spacer -->
<!-- Start Section 3: Video Copy -->
<tr>
<td align="center" style="background-color: #ffffff;" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="90%" style=" width: 90%; max-width:400px;">
<tr>
<p class="text-resp" style="width: 90%; max-width:400px; font-family:Georgia, Helvetica, Arial; font-size:16px; color:#3d3d3d; line-height:30px;" mc:edit="Paragraph">
Some say clothes make the man, we think it’s the boots. Our boots give men confidence from the ground up, confidence to take steps they’ve never taken before.
</p>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- End Section 3: Video Copy -->
<!-- Start Spacer -->
<tr>
<td height="80" bgcolor="#ffffff"></td>
</tr>
<!-- End Spacer -->
<!-- Start Section 4: Shop Muller Teak -->
<tr>
<td align="center" style="background-color: #ffffff;" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td align="center">
<img style="margin-left: auto; margin-right: auto; display:block; line-height:0px; font-size:0px; border:0px; max-width: 450px; width: 100%" src="https://image.ibb.co/m9QZdS/content_image_3.jpg" alt="img">
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- End Section 4: Shop Muller Teak -->
<!-- Start Spacer -->
<tr>
<td height="80" bgcolor="#ffffff"></td>
</tr>
<!-- End Spacer -->
<!-- Start Footer Jargon -->
<tr>
<td align="left" style="background-color: #ffffff;" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="left" border="0" cellpadding="0" cellspacing="0" width="90%" style=" width: 90%; max-width:400px;">
<tr>
<p style=" padding: 0 5%; width: 90%; max-width:600px; font-family:Georgia, Helvetica, Arial; font-size:14px; color:#3d3d3d; line-height:22px;" mc:edit="Paragraph">
Copyright © 2018 HELM Boots. All rights reserved.<br>You are receiving this email because you signed up at www.helmboots.com
</p>
<p style=" padding: 0 5%; width: 90%; max-width:600px; font-family:Georgia, Helvetica, Arial; font-size:14px; color:#3d3d3d; line-height:22px;" mc:edit="Paragraph">
HELM Boots<br> 1200 East 11th St. <br>Suite 101 <br>Austin, TX 78701
</p>
<p style=" padding: 0 5%; width: 90%; max-width:600px; font-family:Georgia, Helvetica, Arial; font-size:14px; color:#3d3d3d; line-height:22px;" mc:edit="Paragraph">
<a style="text-decoration: none; color: #3d3d3d;" href="*|UNSUB|*">Unsubscribe from this list</a> <a style="text-decoration: none; color: #3d3d3d;" href="#">Update subscription preferences</a>
</p>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- End Footer Jargon -->
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>

CSS Two Columns in row in responsive

I have two row inside a row contains 3 li I want to make in reponsive 2 li
but it's dosn't worrk
PS : ITS FOR EMAIL HTML
demo
http://jsbin.com/fobejarexi/3/edit?html,css,output
So the result should look like this on small screens.
image image
image image
image image

As the comments note, you need <table>s instead of <li>'s if this is for an HTML email. I've included some code below that achieves what you ask.
One caveat: For simplicity purposes, this only works in mobile email clients that support #media queries. So this work in iOS Mail, but not mobile Gmail.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
#media (max-width: 600px) {
.table {
width: 100% !important;
}
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0" style="width: 600px;" class="table">
<tr>
<td style="display: block; float: left; line-height: 0;" class="td"><img src="http://placehold.it/200x200&text=1"></td>
<td style="display: block; float: left; line-height: 0;" class="td"><img src="http://placehold.it/200x200&text=2"></td>
<td style="display: block; float: left; line-height: 0;" class="td"><img src="http://placehold.it/200x200&text=3"></td>
<td style="display: block; float: left; line-height: 0;" class="td"><img src="http://placehold.it/200x200&text=4"></td>
<td style="display: block; float: left; line-height: 0;" class="td"><img src="http://placehold.it/200x200&text=5"></td>
<td style="display: block; float: left; line-height: 0;" class="td"><img src="http://placehold.it/200x200&text=6"></td>
</tr>
</table>
</body>
</html>

Here's a cleaned up snippet of code I use to shift 2 rows of 3 to 3 rows of 2 on mobile, which works across all platforms, even if they don't support media queries:
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width: 94%; max-width: 615px;">
<tr><td style="text-align: center; font-size: 0; padding: 15px 0 0px 0;">
<!--[if (gte mso 9)|(IE)]>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr><td width="200" valign="top" style="vertical-align: top;">
<![endif]-->
<div style="width: 50%; max-width: 205px; display: inline-block; vertical-align: top; margin-bottom: 15px;">
<table cellpadding="0" cellspacing="0" border="0" width="188" align="center" bgcolor="#ffffff" style="max-width: 92%;">
<tr><td align="center">
<img alt="" border="0" src="http://placehold.it/188x220" style="border: 0; display: block;" class="gridimg" /></a>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="200" valign="top" style="vertical-align: top;">
<![endif]-->
<div style="width: 50%; max-width: 205px; display: inline-block; vertical-align: top; margin-bottom: 15px;">
<table cellpadding="0" cellspacing="0" border="0" width="188" align="center" bgcolor="#ffffff" style="max-width: 92%;">
<tr><td align="center">
<img alt="" border="0" src="http://placehold.it/188x220" style="border: 0; display: block;" class="gridimg" /></a>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="200" valign="top" style="vertical-align: top;">
<![endif]-->
<div style="width: 50%; max-width: 205px; display: inline-block; vertical-align: top; margin-bottom: 15px;">
<table cellpadding="0" cellspacing="0" border="0" width="188" align="center" bgcolor="#ffffff" style="max-width: 92%;" class="wrapper2">
<tr><td align="center">
<img alt="" border="0" src="http://placehold.it/188x220" style="border: 0; display: block;" class="gridimg" /></a>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
<tr><td width="200" style="vertical-align: top;">
<![endif]-->
<div style="width: 50%; max-width: 205px; display: inline-block; vertical-align: top; margin-bottom: 15px;">
<table cellpadding="0" cellspacing="0" border="0" width="188" align="center" bgcolor="#ffffff" style="max-width: 92%;" class="wrapper2">
<tr><td align="center">
<img alt="" border="0" src="http://placehold.it/188x220" style="border: 0; display: block;" class="gridimg" /></a>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="200" valign="top" style="vertical-align: top;">
<![endif]-->
<div style="width: 50%; max-width: 205px; display: inline-block; vertical-align: top; margin-bottom: 15px;">
<table cellpadding="0" cellspacing="0" border="0" width="188" align="center" bgcolor="#ffffff" style="max-width: 92%;" class="wrapper2">
<tr><td align="center">
<img alt="" border="0" src="http://placehold.it/188x220" style="border: 0; display: block;" class="gridimg" /></a>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="200" valign="top" style="vertical-align: top;">
<![endif]-->
<div style="width: 50%; max-width: 205px; display: inline-block; vertical-align: top; margin-bottom: 15px;">
<table cellpadding="0" cellspacing="0" border="0" width="188" align="center" bgcolor="#ffffff" style="max-width: 92%;" class="wrapper2">
<tr><td align="center">
<img alt="" border="0" src="http://placehold.it/188x220" style="border: 0; display: block;" class="gridimg" /></a>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
<![endif]-->
</table>
</td>
</tr>
</table>
You will want to enhance this with some classes to help it look better on iPhones and older Androids, but it will look okay on the Gmail app.

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">