html email template table header alignment

html email template table header alignment - html

I have to float two header alignment left and right, the logo will be float left and navigation will be right but vertically center
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en" style="" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">
<!--xmlns fix Outlook Scaling-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="format-detection" content="telephone=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--Fix Outlook Scaling-->
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<link href="https://fonts.googleapis.com/css?family=Nunito:300,400,600,700|Nunito+Sans:300,400,600,700,900" id="google-fonts-css" media="all" rel="stylesheet" type="text/css" />
<title></title>
<!--[if mso]>
<style type="text/css">
body, table, td {
font-family: Arial, Helvetica, sans-serif !important;
}
</style>
<![endif]-->
<style type="text/css">
html,
body {
font-family: 'Nunito Sans', Helvetica, Arial;
margin: 0 !important;
padding: 0 !important;
text-size-adjust: none !important;
-ms-text-size-adjust: none !important;
-webkit-text-size-adjust: none !important;
-webkit-font-smoothing: antialiased;
background-color: #EEEEEE;
font-size: 16px;
}
body {
height: 100% !important;
width: 100% !important;
}
a {
text-decoration: none;
color: #002173;
}
h1 {
font-family: 'Nunito Sans', Helvetica, Arial;
}
.cus-pad {
padding-left: 20px;
padding-right: 20px;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass span,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
#outlook a {
padding: 0;
}
table,
td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
body {
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
img {
-ms-interpolation-mode: bicubic;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
}
/*no linky*/
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;
}
.link-hover:hover {
text-decoration: none !important;
}
table {
border-collapse: collapse;
margin: 0 auto;
padding: 20px;
}
.button:hover {
background-color: #ffd251 !important;
}
.button-2:hover {
background-color: #777671 !important;
}
tr.social-link td a img {
height: 20px;
width: auto;
}
#media only screen and (max-width: 481px) {
/**generic styles for content added through editor**/
table {
width: auto !important;
}
td {
display: block;
margin: 0 auto;
width: auto !important;
}
/**all tds added to template will wrap!**/
img {
float: none !important;
display: block;
padding: 0;
max-width: 100%;
height: auto !important;
}
/****/
.container {
padding: 0 !important;
}
.no-wrap {
width: 100% !important;
}
table.no-wrap td {
/**add class no-wrap to table to keep it from wrapping**/
display: table-cell !important;
}
table[class="resp"] {
width: auto !important;
padding: 5px !important;
}
.main-content-area {
-webkit-text-size-adjust: 90% !important;
line-height: 21px;
text-align: left;
}
.promo-code {
padding: 20px !important;
}
td[class="main-content-area"] h2 {
-webkit-text-size-adjust: 80% !important;
}
td[class="force-col"] {
/**add this class to any td you'd like to wrap in a one-column layout**/
display: block;
margin: 0 auto;
width: auto !important;
padding: 0;
}
img {
max-width: 100% !important;
height: auto !important;
}
/**hide content**/
*[class="hide-me"] {
display: none !important;
}
img[class="show-img"] {
display: block !important;
padding-top: 10px;
max-height: none !important;
width: auto !important;
height: auto !important;
}
}
.gf-e-header td a {
text-transform: uppercase;
font-weight: bold;
font-size: 14px;
}
</style>
</head>
<body style="background-color: #eeeeee;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="margin-top: 30px">
<tr>
<td class="container" style="" width="100%">
<table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" class="resp" width="600">
<tbody>
<tr>
<td class="cus-pad" style="padding-top: 20px">
<table align="left">
<tr class="gf-e-header">
<td class="gf-e-header">
<div style="float: left">
<a href="https://emfluence.com?emfl_e=916958C94AF9D49E069A3B6512D798B4&emfl_c=68E0D107B451EDAAC017E81290098F6D4F1A98D9FF722E2FE743BFB4C178E43F" target="_blank">
<img border="0" src="https://i.imgur.com/rczT2MV.png" width="130" />
</a>
</div>
</td>
<td valign="middle" align="right">
Company
Services
Locations
Resources
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding-bottom: 25px;padding-top: 20px;padding-right: 20px;padding-left: 20px;">
<div style="border:1px solid #002173"></div>
</td>
</tr>
<tr>
<td class="cus-pad">
<h1 style="color:#002173">General information</h1>
<p style="color:#454545">The following information will provide you with an easy to navigate overview of what will happen with your personal data when you visit our website. The term „personal data“ comprises all data that can be used to personally identify you.
For detailed information about the subject matter of data protection, please consult our Data Protection Declaration, which we have included beneath this copy.</p>
</td>
</tr>
<tr>
<td align="left" bgcolor="#FFFfFF" class="hero cus-pad">
<img src="https://i.imgur.com/f1OWoqx.jpg" width="560px" />
</td>
</tr>
<tr>
<td class="cus-pad">
<h1 style="color:#002173">Data recording on our website</h1>
<h4 style="color:#454545">Who is the responsible party for the recording of data on this website (i.e. the„controller“)?
</h4>
</td>
</tr>
<tr>
<td align="left" class="main-content-area cus-pad"><span style="font-size: 15px; color:#454545">The data on this website is processed by the operator of the website, whose contact
information is available under section „Information Required by Law“ on this website.</span>
</td>
</tr>
<tr>
<td align="center" style="padding-bottom: 50px;padding-top:10px;">
<div>
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word"
href="http://" style="height:40px;v-text-anchor:middle;width:150px;" stroke="f"
fillcolor="#70002c">
<w:anchorlock/>
<center>
<![endif]-->
<a href="http://" style="background-color:#70002c;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;">Learn
More</a>
<!--[if mso]>
</center>
</v:rect>
<![endif]-->
</div>
</td>
</tr>
<tr>
<td class="cus-pad" style="padding-top: 40px;padding-bottom:40px">
<div style="border:1px solid #002173;"></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" style="padding: 0">
<table border="0" cellpadding="0" cellspacing="0" class="resp" style="background: #FFFFFF; padding-left: 15px; padding-right: 15px;" width="600">
<tbody>
<tr>
<td align="right" style="padding: 0 0 0px 15px;">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" style="padding: 0 0 30px 0;">
<a href="https://emfluence.com?emfl_e=916958C94AF9D49E069A3B6512D798B4&emfl_c=68E0D107B451EDAAC017E81290098F6D4F1A98D9FF722E2FE743BFB4C178E43F" target="_blank">
<img border="0" src="https://i.imgur.com/rczT2MV.png" width="100" />
</a>
</td>
</tr>
<tr class="social-link">
<td align="center" style="padding-bottom: 30px;">
<a style="margin-right: 10px;" href="">
<img height="18px" src="https://i.imgur.com/gWSZvGP.png" alt="">
</a>
<a style="margin-right: 10px;" href="">
<img height="18px" src="https://i.imgur.com/cCgx01J.png" alt="">
</a>
<a style="margin-right: 10px;" href="">
<img height="18px" src="https://i.imgur.com/HKXV4wh.png" alt="">
</a>
<a href="">
<img height="18px" src="https://i.imgur.com/Akw0TqM.png" alt="">
</a>
</td>
</tr>
<tr>
<td style=" color:#6C6C6C; font-size:14px;padding-bottom: 30px;">
<a style="color:#6C6C6C; border-right: 1px solid #6C6C6C; padding-right: 12px;font-weight: bold;line-height: 14px" href="">Privacy Policy</a>
<a style="color:#6C6C6C; padding-left: 10px;font-weight: bold; line-height: 14px " href="">Terms of
services</a>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr align="center">
<td style="padding-bottom: 30px;font-size: 10px">
This email was sent to example#gmail.com <br/> © 2004-2020 All rights reserved - Global Fairways®
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<br clear="all" />
</body>
</html>
And the responsive links will go down after the logo.

Your header is currently not taking up the full width of the email, so first add width:100%; to this element. Next, just add either text-align:right; or just align="right" to the navigation section. See below:
<table align="left" style="width: 100%;">
<tbody>
<tr class="gf-e-header">
<td class="gf-e-header">
<a href="https://emfluence.com?emfl_e=916958C94AF9D49E069A3B6512D798B4&emfl_c=68E0D107B451EDAAC017E81290098F6D4F1A98D9FF722E2FE743BFB4C178E43F" target="_blank">
<img border="0" src="https://i.imgur.com/rczT2MV.png" width="130">
</a>
</td>
<td style="text-align: right;">
Company
Services
Locations
Resources
</td>
</tr>
</tbody>
</table>
JSFiddle

First of all you have pretty messed up code , I have filtered some. I fixed your issue using display:grid; to header logo and nav container and giving them both 1fr , so they can take space evenly ,
body {
font-family: 'Nunito Sans', Helvetica, Arial;
margin: 0 !important;
padding: 0 !important;
text-size-adjust: none !important;
-ms-text-size-adjust: none !important;
-webkit-text-size-adjust: none !important;
-webkit-font-smoothing: antialiased;
background-color: #EEEEEE;
font-size: 16px;
}
body {
height: 100% !important;
width: 100% !important;
}
a {
text-decoration: none;
color: #002173;
}
h1 {
font-family: 'Nunito Sans', Helvetica, Arial;
}
.cus-pad {
padding-left: 20px;
padding-right: 20px;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass span,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
#outlook a {
padding: 0;
}
table,
td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
body {
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
img {
-ms-interpolation-mode: bicubic;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
}
/*no linky*/
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;
}
.link-hover:hover {
text-decoration: none !important;
}
table {
border-collapse: collapse;
margin: 0 auto;
padding: 20px;
}
.button:hover {
background-color: #ffd251 !important;
}
.button-2:hover {
background-color: #777671 !important;
}
tr.social-link td a img {
height: 20px;
width: auto;
}
#media only screen and (max-width: 481px) {
/**generic styles for content added through editor**/
table {
width: auto !important;
}
td {
display: block;
margin: 0 auto;
width: auto !important;
}
/**all tds added to template will wrap!**/
img {
float: none !important;
display: block;
padding: 0;
max-width: 100%;
height: auto !important;
}
/****/
.container {
padding: 0 !important;
}
.no-wrap {
width: 100% !important;
}
table.no-wrap td {
/**add class no-wrap to table to keep it from wrapping**/
display: table-cell !important;
}
table[class="resp"] {
width: auto !important;
padding: 5px !important;
}
.main-content-area {
-webkit-text-size-adjust: 90% !important;
line-height: 21px;
text-align: left;
}
.promo-code {
padding: 20px !important;
}
td[class="main-content-area"] h2 {
-webkit-text-size-adjust: 80% !important;
}
td[class="force-col"] {
/**add this class to any td you'd like to wrap in a one-column layout**/
display: block;
margin: 0 auto;
width: auto !important;
padding: 0;
}
img {
max-width: 100% !important;
height: auto !important;
}
/**hide content**/
*[class="hide-me"] {
display: none !important;
}
img[class="show-img"] {
display: block !important;
padding-top: 10px;
max-height: none !important;
width: auto !important;
height: auto !important;
}
}
.header-top{
display:grid;
grid-template-columns:1fr 1fr;
place-items:center;
padding: 30px;
}
.header-top .logo{
justify-self:left;
}
.header-top .nav{
text-align:right;
display:flex;
flex-direction:row;
justify-content: right;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en" style="" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">
<!--xmlns fix Outlook Scaling-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="format-detection" content="telephone=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--Fix Outlook Scaling-->
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<link href="https://fonts.googleapis.com/css?family=Nunito:300,400,600,700|Nunito+Sans:300,400,600,700,900"
id="google-fonts-css" media="all" rel="stylesheet" type="text/css" />
<title></title>
<!--[if mso]>
<style type="text/css">
body, table, td {
font-family: Arial, Helvetica, sans-serif !important;
}
</style>
<![endif]-->
</head>
<body style="background-color: #eeeeee;">
<table cellpadding="0" cellspacing="0" width="100%" style="margin-top: 30px">
<tr>
<td class="container" width="100%">
<table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" class="resp" width="600">
<tbody>
<tr>
<td>
<div class="header-top">
<a class="logo" href="https://emfluence.com?emfl_e=916958C94AF9D49E069A3B6512D798B4&emfl_c=68E0D107B451EDAAC017E81290098F6D4F1A98D9FF722E2FE743BFB4C178E43F"
target="_blank">
<img border="0" src="https://i.imgur.com/rczT2MV.png" width="130" />
</a>
<div class="nav">
Company
Services
Locations
Resources
</div>
</div>
</td>
</tr>
<tr>
<td style="padding-bottom: 25px;padding-top: 20px;padding-right: 20px;padding-left: 20px;">
<div style="border:1px solid #002173"></div>
</td>
</tr>
<tr>
<td class="cus-pad">
<h1 style="color:#002173">General information</h1>
<p style="color:#454545">The following information will provide you with an easy to
navigate overview of what will happen with your personal data when you visit our
website. The term „personal data“ comprises all data that can be used to personally
identify you.
For detailed information about the subject matter of data protection, please consult
our Data Protection Declaration, which we have included beneath this copy.</p>
</td>
</tr>
<tr>
<td align="left" bgcolor="#FFFfFF" class="hero cus-pad">
<img src="https://i.imgur.com/f1OWoqx.jpg" width="560px" />
</td>
</tr>
<tr>
<td class="cus-pad">
<h1 style="color:#002173">Data recording on our website</h1>
<h4 style="color:#454545">Who is the responsible party for the recording of data on this
website (i.e. the„controller“)?
</h4>
</td>
</tr>
<tr>
<td align="left" class="main-content-area cus-pad"><span
style="font-size: 15px; color:#454545">The data on this website is processed by the
operator of the website, whose contact
information is available under section „Information Required by Law“ on this
website.</span>
</td>
</tr>
<tr>
<td align="center" style="padding-bottom: 50px;padding-top:10px;">
<div>
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word"
href="http://" style="height:40px;v-text-anchor:middle;width:150px;" stroke="f"
fillcolor="#70002c">
<w:anchorlock/>
<center>
<![endif]-->
<a href="http://"
style="background-color:#70002c;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;">Learn
More</a>
<!--[if mso]>
</center>
</v:rect>
<![endif]-->
</div>
</td>
</tr>
<tr>
<td class="cus-pad" style="padding-top: 40px;padding-bottom:40px">
<div style="border:1px solid #002173;"></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" style="padding: 0">
<table border="0" cellpadding="0" cellspacing="0" class="resp"
style="background: #FFFFFF; padding-left: 15px; padding-right: 15px;" width="600">
<tbody>
<tr>
<td align="right" style="padding: 0 0 0px 15px;">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" style="padding: 0 0 30px 0;">
<a href="https://emfluence.com?emfl_e=916958C94AF9D49E069A3B6512D798B4&emfl_c=68E0D107B451EDAAC017E81290098F6D4F1A98D9FF722E2FE743BFB4C178E43F"
target="_blank">
<img border="0" src="https://i.imgur.com/rczT2MV.png" width="100" />
</a>
</td>
</tr>
<tr class="social-link">
<td align="center" style="padding-bottom: 30px;">
<a style="margin-right: 10px;" href="">
<img height="18px" src="https://i.imgur.com/gWSZvGP.png" alt="">
</a>
<a style="margin-right: 10px;" href="">
<img height="18px" src="https://i.imgur.com/cCgx01J.png" alt="">
</a>
<a style="margin-right: 10px;" href="">
<img height="18px" src="https://i.imgur.com/HKXV4wh.png" alt="">
</a>
<a href="">
<img height="18px" src="https://i.imgur.com/Akw0TqM.png" alt="">
</a>
</td>
</tr>
<tr>
<td style=" color:#6C6C6C; font-size:14px;padding-bottom: 30px;">
<a style="color:#6C6C6C; border-right: 1px solid #6C6C6C; padding-right: 12px;font-weight: bold;line-height: 14px"
href="">Privacy Policy</a>
<a style="color:#6C6C6C; padding-left: 10px;font-weight: bold; line-height: 14px "
href="">Terms of
services</a>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr align="center">
<td style="padding-bottom: 30px;font-size: 10px">
This email was sent to example#gmail.com <br /> ©
2004-2020 All rights reserved - Global Fairways®
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<br clear="all" />
</body>
</html>

You used a table inside a td tag. So when u align the list items right , it's not working. I updated that part pls go through and update it in your code.. Happy Coding!!! I just put the list items inside another div.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en" style="" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">
<!--xmlns fix Outlook Scaling-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="format-detection" content="telephone=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--Fix Outlook Scaling-->
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<link href="https://fonts.googleapis.com/css?family=Nunito:300,400,600,700|Nunito+Sans:300,400,600,700,900" id="google-fonts-css" media="all" rel="stylesheet" type="text/css" />
<title></title>
<!--[if mso]>
<style type="text/css">
body, table, td {
font-family: Arial, Helvetica, sans-serif !important;
}
</style>
<![endif]-->
<style type="text/css">
html,
body {
font-family: 'Nunito Sans', Helvetica, Arial;
margin: 0 !important;
padding: 0 !important;
text-size-adjust: none !important;
-ms-text-size-adjust: none !important;
-webkit-text-size-adjust: none !important;
-webkit-font-smoothing: antialiased;
background-color: #EEEEEE;
font-size: 16px;
}
body {
height: 100% !important;
width: 100% !important;
}
a {
text-decoration: none;
color: #002173;
}
h1 {
font-family: 'Nunito Sans', Helvetica, Arial;
}
.cus-pad {
padding-left: 20px;
padding-right: 20px;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass span,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
#outlook a {
padding: 0;
}
table,
td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
body {
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
img {
-ms-interpolation-mode: bicubic;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
}
/*no linky*/
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;
}
.link-hover:hover {
text-decoration: none !important;
}
table {
border-collapse: collapse;
margin: 0 auto;
padding: 20px;
}
.button:hover {
background-color: #ffd251 !important;
}
.button-2:hover {
background-color: #777671 !important;
}
tr.social-link td a img {
height: 20px;
width: auto;
}
#media only screen and (max-width: 481px) {
/**generic styles for content added through editor**/
table {
width: auto !important;
}
td {
display: block;
margin: 0 auto;
width: auto !important;
}
/**all tds added to template will wrap!**/
img {
float: none !important;
display: block;
padding: 0;
max-width: 100%;
height: auto !important;
}
/****/
.container {
padding: 0 !important;
}
.no-wrap {
width: 100% !important;
}
table.no-wrap td {
/**add class no-wrap to table to keep it from wrapping**/
display: table-cell !important;
}
table[class="resp"] {
width: auto !important;
padding: 5px !important;
}
.main-content-area {
-webkit-text-size-adjust: 90% !important;
line-height: 21px;
text-align: left;
}
.promo-code {
padding: 20px !important;
}
td[class="main-content-area"] h2 {
-webkit-text-size-adjust: 80% !important;
}
td[class="force-col"] {
/**add this class to any td you'd like to wrap in a one-column layout**/
display: block;
margin: 0 auto;
width: auto !important;
padding: 0;
}
img {
max-width: 100% !important;
height: auto !important;
}
/**hide content**/
*[class="hide-me"] {
display: none !important;
}
img[class="show-img"] {
display: block !important;
padding-top: 10px;
max-height: none !important;
width: auto !important;
height: auto !important;
}
}
.gf-e-header td a {
text-transform: uppercase;
font-weight: bold;
font-size: 14px;
}
</style>
</head>
<body style="background-color: #eeeeee;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="margin-top: 30px">
<tr>
<td class="container" style="" width="100%">
<table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" class="resp" width="600">
<tbody>
<tr>
<td class="cus-pad" style="padding-top: 20px">
<div style="float: left">
<a href="https://emfluence.com?emfl_e=916958C94AF9D49E069A3B6512D798B4&emfl_c=68E0D107B451EDAAC017E81290098F6D4F1A98D9FF722E2FE743BFB4C178E43F" target="_blank">
<img border="0" src="https://i.imgur.com/rczT2MV.png" width="130" />
</a>
</div>
<div style="float:right;">
Company
Services
Locations
Resources
</div>
</td>
</tr>
<tr>
<td style="padding-bottom: 25px;padding-top: 20px;padding-right: 20px;padding-left: 20px;">
<div style="border:1px solid #002173"></div>
</td>
</tr>
<tr>
<td class="cus-pad">
<h1 style="color:#002173">General information</h1>
<p style="color:#454545">The following information will provide you with an easy to navigate overview of what will happen with your personal data when you visit our website. The term „personal data“ comprises all data that can be used to personally identify you.
For detailed information about the subject matter of data protection, please consult our Data Protection Declaration, which we have included beneath this copy.</p>
</td>
</tr>
<tr>
<td align="left" bgcolor="#FFFfFF" class="hero cus-pad">
<img src="https://i.imgur.com/f1OWoqx.jpg" width="560px" />
</td>
</tr>
<tr>
<td class="cus-pad">
<h1 style="color:#002173">Data recording on our website</h1>
<h4 style="color:#454545">Who is the responsible party for the recording of data on this website (i.e. the„controller“)?
</h4>
</td>
</tr>
<tr>
<td align="left" class="main-content-area cus-pad"><span style="font-size: 15px; color:#454545">The data on this website is processed by the operator of the website, whose contact
information is available under section „Information Required by Law“ on this website.</span>
</td>
</tr>
<tr>
<td align="center" style="padding-bottom: 50px;padding-top:10px;">
<div>
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word"
href="http://" style="height:40px;v-text-anchor:middle;width:150px;" stroke="f"
fillcolor="#70002c">
<w:anchorlock/>
<center>
<![endif]-->
<a href="http://" style="background-color:#70002c;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;">Learn
More</a>
<!--[if mso]>
</center>
</v:rect>
<![endif]-->
</div>
</td>
</tr>
<tr>
<td class="cus-pad" style="padding-top: 40px;padding-bottom:40px">
<div style="border:1px solid #002173;"></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" style="padding: 0">
<table border="0" cellpadding="0" cellspacing="0" class="resp" style="background: #FFFFFF; padding-left: 15px; padding-right: 15px;" width="600">
<tbody>
<tr>
<td align="right" style="padding: 0 0 0px 15px;">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" style="padding: 0 0 30px 0;">
<a href="https://emfluence.com?emfl_e=916958C94AF9D49E069A3B6512D798B4&emfl_c=68E0D107B451EDAAC017E81290098F6D4F1A98D9FF722E2FE743BFB4C178E43F" target="_blank">
<img border="0" src="https://i.imgur.com/rczT2MV.png" width="100" />
</a>
</td>
</tr>
<tr class="social-link">
<td align="center" style="padding-bottom: 30px;">
<a style="margin-right: 10px;" href="">
<img height="18px" src="https://i.imgur.com/gWSZvGP.png" alt="">
</a>
<a style="margin-right: 10px;" href="">
<img height="18px" src="https://i.imgur.com/cCgx01J.png" alt="">
</a>
<a style="margin-right: 10px;" href="">
<img height="18px" src="https://i.imgur.com/HKXV4wh.png" alt="">
</a>
<a href="">
<img height="18px" src="https://i.imgur.com/Akw0TqM.png" alt="">
</a>
</td>
</tr>
<tr>
<td style=" color:#6C6C6C; font-size:14px;padding-bottom: 30px;">
<a style="color:#6C6C6C; border-right: 1px solid #6C6C6C; padding-right: 12px;font-weight: bold;line-height: 14px" href="">Privacy Policy</a>
<a style="color:#6C6C6C; padding-left: 10px;font-weight: bold; line-height: 14px " href="">Terms of
services</a>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr align="center">
<td style="padding-bottom: 30px;font-size: 10px">
This email was sent to example#gmail.com <br/> © 2004-2020 All rights reserved - Global Fairways®
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<br clear="all" />
</body>
</html>

You can change valign="middle" attributes to align="center" and add height="70px" to the navigation table. There are better options, but I think it does what you want it to do.
<table align="right" width="70%" height="70px">
<tbody>
<tr align="center">
<td>
Company
Services
Locations
Resources
</td>
</tr>
</tbody>
</table>

Related

White spaces in the html for email design using table tags

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html style="opacity: 1;" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="width=device-width" name="viewport" />
<title></title>
<style type="text/css">
#import url('https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i');
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;
}
img {
display: block;
border-style: none;
line-height: 0px;
}
div,
p,
a,
li,
td,
th {
-webkit-text-size-adjust: none;
}
table {
display: table;
border-spacing: 0px;
padding: 0;
}
td {
border: 0;
padding: 0;
}
.two-column .contents {
font-size: 14px;
text-align: left;
}
.two-column img {
width: 100%;
height: auto;
}
.two-column .text {
padding-top: 10px;
}
.two-column {
text-align: center;
font-size: 0;
}
.two-column .column {
width: 100%;
max-width: 294px;
display: inline-block;
vertical-align: top;
}
.contents {
width: 100%;
}
.mobile-show {
display: none !important;
font-size: 0 !important;
max-height: 0 !important;
line-height: 0 !important;
padding: 0 !important;
mso-hide: all !important;
/* hide elements in Outlook 2007-2013 */
}
.IconText {
font-size: 11px!important;
line-height: 13px!important;
}
input {
display: none !important;
}
input[id=effect]+div[class=em_show_g] {
display: block;
}
.button {
background-color: #F7E3DA;
border: none;
color: black;
padding: 10px 20px;
text-align: center;
text-decoration: none;
font-weight: bold;
display: inline-block;
margin: 4px 2px;
cursor: pointer;
border-radius: 16px;
}
.button:hover {
background-color: #FFC9FF;
}
#media only screen and (max-width:480px) {
.mobalign {
text-align: center !important;
}
.FullWidth {
width: 100%!important;
height: auto;
}
.mobile-hide {
display: none;
}
.mobile-show {
display: block !important;
margin: 0 !important;
overflow: visible !important;
visibility: visible !important;
width: auto !important;
max-height: inherit !important;
}
.mobile-brands {
width: 95% !important;
max-width: 95% !important;
}
.StackColumn {
display: block;
width: 100% !important;
text-align: center;
}
.OneFromTwo {
display: block;
width: 100% !important;
}
.CentreText {
text-align: center!important;
}
.CTA-Full {
width: 100% !important;
}
.SpacerHeight {
width: 1px;
height: 35px;
}
input[id=effect]+div[class=em_show_g] {
display: none;
}
input[id=effect]:checked+div[class=em_show_g] {
display: block !important;
height: auto !important;
width: auto !important;
overflow: visible !important;
}
.button {
background-color: #F7E3DA;
border: none;
color: black;
padding: 10px 20px;
text-align: center;
text-decoration: none;
font-weight: bold;
display: inline-block;
margin: 4px 2px;
cursor: pointer;
border-radius: 16px;
}
.button:hover {
background-color: #FFC9FF;
}
}
</style>
<!--[if mso]>
<style>
span, td, th, table, div, a {
font-family: Arial, Helvetica, sans-serif !important;
}
</style>
<![endif]-->
<style type="text/css">
</style>
<style type="text/css">
</style>
<style type="text/css">
</style>
<style type="text/css">
</style>
<style type="text/css">
</style>
<style type="text/css">
</style>
<style type="text/css">
</style>
<style type="text/css">
</style>
<style type="text/css">
</style>
<style type="text/css">
</style>
<style type="text/css">
</style>
<style type="text/css">
</style>
</head>
<body background="" bgcolor="#eceef3" style="">
<table cellpadding="0" cellspacing="0" style="border: 0px; padding: 0px; margin: 0px; position: absolute; display: none; float: left">
<tr>
<td height="1" style="font-size: 1px; line-height: 1px; padding: 0px;">
<!--Start BK pixel-->
<IMG SRC="" HEIGHT="1" WIDTH="1" /><br/><br/>
<!--End BK pixel-->
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<!--<table width="100%" border="0" cellpadding="0" cellspacing="0" style="font-family:Helvetica, Arial, sans-serif;">
<tr>
<td align="center">-->
<table align="center" bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" class="content" style="margin:0 auto; table-layout:fixed; max-width:600px; width:100%; font-family: 'Lato', Helvetica, Arial, sans-serif; background:#ffffff; font-weight: 300;">
<!-- Preheader -->
<tbody>
<tr>
<td align="center" bgcolor="#FFFFFF" width="100%">
<div data-content-region-name="Pre_Header">
<!-- Preheader -->
<tr class="mobile-hide">
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#ffffff">
<tr>
<td align="center" style="font-family: 'Lato', Helvetica, Arial, sans-serif; color:#1e1e1e; font-weight: 300; font-size:12px; line-height:18px; padding:20px;" width="100%">
</td>
</tr>
</table>
</td>
</tr>
<!-- Pre-Header End -->
</div>
</td>
</tr>
</tbody>
<tbody>
<tr>
<th align="center">
<table align="center" bgcolor="ffffff" border="0" cellpadding="0" cellspacing="0" style="background:#ffffff;" width="100%">
<tbody>
<tr>
<th align="left" style="padding-left: 20px; padding-bottom: 20px; padding-top: 20px;" width="50%">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="FullWidth" width="170">
<tbody>
<tr>
<th align="center" width="20">
<img alt="" border="0" height="20" src="" style="display: block; padding-right: 5px" width="16" />
</th>
<th align="center" style="width: 20px">
<img alt="" border="0" height="20" src="" style="display: block;" width="16" />
</th>
</tr>
</tbody>
</table>
</th>
<th align="right" style="padding-right: 20px" width="50%">
<table align="right" border="0" cellpadding="0" cellspacing="0" class="FullWidth" width="150">
<tbody>
<tr>
<th align="right" width="23">
<img alt="View in browser" border="0" class="mobile-hide" height="16" src="" style="display: block;" width="23" />
</th>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</th>
</tr>
<!-- Header Image End -->
<!-- Header -->
<!-- Header Image End -->
<!-- Desktop Navigation -->
<!-- Desktop Navigation End -->
<!-- Content Starts Here -->
<tr>
<td width="100%" align="center">
<a href="#" target="_blank">
<img src="" width="100%" height="auto" alt="" /></a>
</td>
</tr>
<tr>
<td style="max-width:600px; width:100%; font-size:0px;" style="display:block; line-height:0px;">
<table style="max-width:600px; width:100%; line-height:0px; display:block; ">
<tr>
<td width="50%" height="auto" align="center" style="line-height:0px;">
<a href="#" target="_blank">
<img src="" width="100%" height="auto" alt="" /></a>
</td>
<td width="50%" height="auto" align="center" style="line-height:0px; font-size:0px;">
<a href="#" target="_blank">
<img src="" width="100%" height="auto" alt="" /></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="max-width:600px; width:100%; font-size:0px;" style="display:block; line-height:0px;">
<table style="max-width:600px; width:100%; line-height:0px; display:block; ">
<tr>
<td width="50%" height="auto" align="center" style="line-height:0px;">
<a href="#" target="_blank">
<img src="" width="100%" height="auto" alt="" /></a>
</td>
<td width="50%" height="auto" align="center" style="line-height:0px; font-size:0px;">
<a href="#" target="_blank">
<img src="" width="100%" height="auto" alt="" /></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="max-width:600px; width:100%; font-size:0px;" style="display:block; line-height:0px;">
<table style="max-width:600px; width:100%; line-height:0px; display:block; ">
<tr>
<td width="50%" height="auto" align="center" style="line-height:0px;">
<a href="#" target="_blank">
<img src="" width="100%" height="auto" alt="" /></a>
</td>
<td width="50%" height="auto" align="center" style="line-height:0px; font-size:0px;">
<a href="#" target="_blank">
<img src="" width="100%" height="auto" alt="" /></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="max-width:600px; width:100%; font-size:0px;" style="display:block; line-height:0px;">
<table style="max-width:600px; width:100%; line-height:0px; display:block; ">
<tr>
<td width="50%" height="auto" align="center" style="line-height:0px;">
<a href="#" target="_blank">
<img src="" width="100%" height="auto" alt="" /></a>
</td>
<td width="50%" height="auto" align="center" style="line-height:0px; font-size:0px;">
<a href="#" target="_blank">
<img src="" width="100%" height="auto" alt="" /></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="max-width:600px; width:100%; font-size:0px;" style="display:block; line-height:0px;">
<table style="max-width:600px; width:100%; line-height:0px; display:block; ">
<tr>
<td width="50%" height="auto" align="center" style="line-height:0px;">
<a href="#" target="_blank">
<img src="" width="100%" height="auto" alt="" /></a>
</td>
<td width="50%" height="auto" align="center" style="line-height:0px; font-size:0px;">
<a href="#" target="_blank">
<img src="" width="100%" height="auto" alt="" /></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="max-width:600px; width:100%; font-size:0px;" style="display:block; line-height:0px;">
<table style="max-width:600px; width:100%; line-height:0px; display:block; ">
<tr>
<td width="50%" height="auto" align="center" style="line-height:0px;">
<a href="#" target="_blank">
<img src="" width="100%" height="auto" alt="" /></a>
</td>
<td width="50%" height="auto" align="center" style="line-height:0px; font-size:0px;">
<a href="#" target="_blank">
<img src="" width="100%" height="auto" alt="" /></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100%" align="center" valign="middle" style="padding: 0px 0px 0px 0px;">
<a href="#" target="_blank">
<img style="display:block;border:0;" src="" width="100%" height="auto" alt="" /></a>
</td>
</tr>
I've been trying to design an email template which has images. I use table structure to create the email with HTML and CSS. However, I see white lines between the images in different platforms. I don't have a problem in Gmail desktop, but I see white lines when opened in Gmail mobile app. How can this be fixed? I've also tried adding display: block; and font-size: 0px; but the issue still exists.

Try this code brother
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Simple Transactional Email</title>
<style>
/* -------------------------------------
GLOBAL RESETS
------------------------------------- */
/*All the styling goes here*/
img {
border: none;
-ms-interpolation-mode: bicubic;
max-width: 100%;
}
body {
background-color: #f6f6f6;
font-family: sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 14px;
line-height: 1.4;
margin: 0;
padding: 0;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
table {
border-collapse: separate;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
width: 100%; }
table td {
font-family: sans-serif;
font-size: 14px;
vertical-align: top;
}
/* -------------------------------------
BODY & CONTAINER
------------------------------------- */
.body {
background-color: #f6f6f6;
width: 100%;
}
/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
.container {
display: block;
margin: 0 auto !important;
/* makes it centered */
max-width: 580px;
padding: 10px;
width: 580px;
}
/* This should also be a block element, so that it will fill 100% of the .container */
.content {
box-sizing: border-box;
display: block;
margin: 0 auto;
max-width: 580px;
padding: 10px;
}
/* -------------------------------------
HEADER, FOOTER, MAIN
------------------------------------- */
.main {
background: #ffffff;
border-radius: 3px;
width: 100%;
}
.wrapper {
box-sizing: border-box;
padding: 20px;
}
.content-block {
padding-bottom: 10px;
padding-top: 10px;
}
.footer {
clear: both;
margin-top: 10px;
text-align: center;
width: 100%;
}
.footer td,
.footer p,
.footer span,
.footer a {
color: #999999;
font-size: 12px;
text-align: center;
}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1,
h2,
h3,
h4 {
color: #000000;
font-family: sans-serif;
font-weight: 400;
line-height: 1.4;
margin: 0;
margin-bottom: 30px;
}
h1 {
font-size: 35px;
font-weight: 300;
text-align: center;
text-transform: capitalize;
}
p,
ul,
ol {
font-family: sans-serif;
font-size: 14px;
font-weight: normal;
margin: 0;
margin-bottom: 15px;
}
p li,
ul li,
ol li {
list-style-position: inside;
margin-left: 5px;
}
a {
color: #3498db;
text-decoration: underline;
}
/* -------------------------------------
BUTTONS
------------------------------------- */
.btn {
box-sizing: border-box;
width: 100%; }
.btn > tbody > tr > td {
padding-bottom: 15px; }
.btn table {
width: auto;
}
.btn table td {
background-color: #ffffff;
border-radius: 5px;
text-align: center;
}
.btn a {
background-color: #ffffff;
border: solid 1px #3498db;
border-radius: 5px;
box-sizing: border-box;
color: #3498db;
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: bold;
margin: 0;
padding: 12px 25px;
text-decoration: none;
text-transform: capitalize;
}
.btn-primary table td {
background-color: #3498db;
}
.btn-primary a {
background-color: #3498db;
border-color: #3498db;
color: #ffffff;
}
/* -------------------------------------
OTHER STYLES THAT MIGHT BE USEFUL
------------------------------------- */
.last {
margin-bottom: 0;
}
.first {
margin-top: 0;
}
.align-center {
text-align: center;
}
.align-right {
text-align: right;
}
.align-left {
text-align: left;
}
.clear {
clear: both;
}
.mt0 {
margin-top: 0;
}
.mb0 {
margin-bottom: 0;
}
.preheader {
color: transparent;
display: none;
height: 0;
max-height: 0;
max-width: 0;
opacity: 0;
overflow: hidden;
mso-hide: all;
visibility: hidden;
width: 0;
}
.powered-by a {
text-decoration: none;
}
hr {
border: 0;
border-bottom: 1px solid #f6f6f6;
margin: 20px 0;
}
/* -------------------------------------
RESPONSIVE AND MOBILE FRIENDLY STYLES
------------------------------------- */
#media only screen and (max-width: 620px) {
table[class=body] h1 {
font-size: 28px !important;
margin-bottom: 10px !important;
}
table[class=body] p,
table[class=body] ul,
table[class=body] ol,
table[class=body] td,
table[class=body] span,
table[class=body] a {
font-size: 16px !important;
}
table[class=body] .wrapper,
table[class=body] .article {
padding: 10px !important;
}
table[class=body] .content {
padding: 0 !important;
}
table[class=body] .container {
padding: 0 !important;
width: 100% !important;
}
table[class=body] .main {
border-left-width: 0 !important;
border-radius: 0 !important;
border-right-width: 0 !important;
}
table[class=body] .btn table {
width: 100% !important;
}
table[class=body] .btn a {
width: 100% !important;
}
table[class=body] .img-responsive {
height: auto !important;
max-width: 100% !important;
width: auto !important;
}
}
/* -------------------------------------
PRESERVE THESE STYLES IN THE HEAD
------------------------------------- */
#media all {
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.apple-link a {
color: inherit !important;
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
text-decoration: none !important;
}
#MessageViewBody a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
.btn-primary table td:hover {
background-color: #34495e !important;
}
.btn-primary a:hover {
background-color: #34495e !important;
border-color: #34495e !important;
}
}
</style>
</head>
<body class="">
<span class="preheader">This is preheader text. Some clients will show this text as a preview.</span>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body">
<tr>
<td> </td>
<td class="container">
<div class="content">
<!-- START CENTERED WHITE CONTAINER -->
<table role="presentation" class="main">
<!-- START MAIN CONTENT AREA -->
<tr>
<td class="wrapper">
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<p>Hi there,</p>
<p>Sometimes you just want to send a simple HTML email with a simple design and clear call to action. This is it.</p>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
<tbody>
<tr>
<td align="left">
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td> Call To Action </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<p>This is a really simple email template. Its sole purpose is to get the recipient to click the button with no distractions.</p>
<p>Good luck! Hope it works.</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- END MAIN CONTENT AREA -->
</table>
<!-- END CENTERED WHITE CONTAINER -->
<!-- START FOOTER -->
<div class="footer">
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="content-block">
<span class="apple-link">Company Inc, 3 Abbey Road, San Francisco CA 94102</span>
<br> Don't like these emails? Unsubscribe.
</td>
</tr>
<tr>
<td class="content-block powered-by">
Powered by HTMLemail.
</td>
</tr>
</table>
</div>
<!-- END FOOTER -->
</div>
</td>
<td> </td>
</tr>
</table>
</body>
</html>

How to make a table stack on mobile?

Working on a newsletter template, and I'm trying to get a table of three ads (and a gap in between) to display one beneath the other on mobile, while displaying as a row on desktop (which is behaving as expected right now).
I've looked at Media Queries and classes to see what I can do including display: block and so forth, but haven't come up with anything that works in testing.
Here's the table that is housing these images:
<!-- begin snippet: js hide: false console: true babel: false -->
<table idstyle="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;background-color:${freeTextBackgroundColor};"
bgcolor="${freeTextBackgroundColor}" valign="top">
<center>
<table class="table600" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;"
align="center" border="0" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td class="" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${freeTextSpacer};font-size:${freeTextSpacer};"
height="${freeTextSpacer}"> </td>
</tr>
<tr>
<td class="secondary-font text" style="-moz-hyphens: none;-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-ms-text-size-adjust: 100%;hyphens: none;font-family:'Lato', Arial, sans-serif;font-size: 14px;line-height: 23px;color: #666666;border-collapse: collapse;">
<div>
<table>
<tbody>
<tr>
<td align="center" valign="top" width="300" style="width: 300px;"> <img src="<IMG SRC FOR BLOCK 1>" /> </td>
<td align="center" valign="top" width="50" style="width: 50px;"></td>
<td align="center" valign="top" width="300" style="width: 300px;"> <img src="<IMG SRC FOR BLOCK 1>" /> </td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td class="" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${freeTextSpacer2};font-size:${freeTextSpacer2};"
height="${freeTextSpacer2}"> </td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
</tbody>
</table>
Desktop View (Works):
Mobile View (Problem):
I need to keep the Desktop as is, but make the two blocks on mobile appear one underneath the other.

/* Prevent WebKit and Windows mobile changing default text sizes */
body, table, td, a{-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}
/* 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;}
table, td { border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt !important;}
/* remove the download icon from gmail*/
img + div { display:none; }
/* 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 only screen and (max-width: 525px) {
/* ALLOWS FOR FLUID TABLES */
.wrapper {
width: 100% !important;
max-width: 100% !important;
}
/* FULL-WIDTH TABLES */
.responsive-table {
width: 100% !important;
}
/* ADJUST BUTTONS ON MOBILE */
.mobile-button-container {
margin: 0 auto;
width: 100% !important;
}
/* FULL WIDTH IMAGE */
.img-max {
max-width: 100% !important;
width: 100% !important;
height: auto !important;
}
/* EVENT SECTION BUTTON */
.button-padding {
padding-left: 30px;
padding-right: 30px;
}
.mobile-center {
text-align: center !important;
}
.remove-float {
float: none !important;
margin: 0 auto !important;
display: inline-block !important;
}
.normal-padding {
padding-top: 20px !important;
}
table[class="body"] .content--wrapper {
padding-left: 20px !important;
padding-right: 20px !important;
}
table[class="body"] .responsive-table {
float: none !important;
width: 100% !important;
clear: both;
}
.center-responsive{
text-align: -webkit-center;
}
}
#media screen and (max-width: 599px) {
.container {
width: 100%!important;
}
.wrapper {
width: 100% !important;
max-width: 100% !important;
}
.mobile-center {
width: 100% !important;
text-align: center !important;
}
.remove-float {
float: none !important;
margin: 0 auto !important;
display: inline-block !important;
}
.col-2 {
max-width: 100% !important;
width: 100% !important;
}
.col-3 {
max-width: 100% !important;
width: 100% !important;
}
.pi-col-wrapper {
display: block;
width: 100%!important;
}
.pi-col {
width: 100%;
}
.center-responsive{
text-align: -webkit-center;
}
}
#media screen and (min-width: 600px) {
.container {
width: 600px!important;
margin: 0 auto!important;
}
.mobile-center {
width: 100% !important;
}
.col-2 {
display: inline-block !important;
width: 262px !important;
}
.col-3 {
display: inline-block !important;
width: 185px !important;
}
.fluid-wrapper {
width: 540px !important;
}
.pi-col-wrapper {
display: inline-block;
width: 50%!important;
}
.pi-col {
width: 255px !important;
}
.center-responsive{
text-align: -webkit-right;
}
}
/* ANDROID CENTER FIX */
div[style*="margin: 16px 0;"] { margin: 0 !important; }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Janssen</title>
<!--[if gte mso 9]>
<style>
sup { font-size: 100% !important; }
</style>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
</head>
<body style="-moz-osx-font-smoothing: grayscale; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; background-color: #f4f4f4; color: #4e5054; font-family: 'Verdana', 'Arial', 'Helvetica', sans-serif; font-size: 12px; font-smoothing: antialiased; font-weight: normal; line-height: 18px; margin: 0; min-width: 100%; padding: 0; text-align: left; width: 100% !important;">
<table cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#f4f4f4" style="width:100% !important;">
<tbody>
<tr>
<td align="center" valign="top">
<table class="container" cellpadding="0" cellspacing="0" border="0" width="600" bgcolor="#ffffff">
<tbody>
<!-- ========== INTRO TEXT WITH SIGNATURE STARTS ========== -->
<tr>
<td class="content--wrapper" style="-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; border-collapse: collapse; color: #717171; font-family: 'Verdana', 'Arial', 'Helvetica', sans-serif; font-size: 12px; font-smoothing: antialiased; font-weight: normal; line-height: 20px; margin: 0; padding: 15px 30px 37px; text-align: left; vertical-align: top;">
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%; width: 100% !important;">
<tbody>
<tr>
<td bgcolor="#ffffff" align="center" style="padding: 0;" class="section-padding">
<table border="0" cellpadding="0" cellspacing="0" width="540" style="padding: 0;" class="responsive-table">
<tbody>
<tr>
<td align="center" height="100%" valign="top" width="100%" style="padding-bottom: 20px;">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="540">
<tr>
<td align="center" valign="top" width="540">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:540;">
<tbody>
<tr>
<td align="left" valign="top" style="font-size:0;" bgcolor="#f7f7f7">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="540">
<tr>
<td align="left" valign="top" width="268">
<![endif]-->
<div style="display:inline-block; max-width:268px; vertical-align:top; width:100%;" class="wrapper">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="168" class="wrapper">
<tbody>
<tr>
<td valign="top">
<img src="https://dummyimage.com/262x170/000/fff.png" alt="alt text here" width="262" height="170" border="0" style="display: block; font-family: Arial; color: #266e9c; font-size: 14px;" class="wrapper">
</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
<td align="left" valign="top" width="268">
<![endif]-->
<div style="display:inline-block; max-width:268px; vertical-align:top; width:100%;" class="wrapper">
<table align="left" bgcolor="#f7f7f7" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 268px; float: right;" class="wrapper">
<tbody>
<tr>
<td style="padding: 15px;padding-top: 27px" class="no-padding">
<!-- ARTICLE -->
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr>
<td align="left" style="font-size: 13px; line-height: 20px; color: #717171; font-family: 'Verdana', 'Arial', 'Helvetica', sans-serif; text-decoration: none;" class="padding-copy">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</td>
</tr>
<tr>
<td align="left" style="font-family: 'Verdana', 'Arial', 'Helvetica', sans-serif; font-size: 12px; font-weight: normal; line-height: 20px; padding-bottom: 9px;padding-top: 16px;" class="">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" style="border-radius: 5px; padding:9px 14px 9px 14px;" bgcolor="#002060">
READ MORE >
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- ========== LEFT RIGHT TWO COLUMN WITH THUMBNAIL ENDS ========== -->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
I have tested on outlook and also checked the orientation issue on iPhone. It's working perfectly on devices. Just put the contents and adjust accordingly. Hope it'll help

Why does the elements in row are collapsing on apple mail agent on responsive layout?

On responsive the other 2 or more elements are collapsing(http://prntscr.com/m2x4ke) What am I doing wrong? It is everywhere perfect except MacOS iOS email agent.
I have tried everything i knew. display to change and width 100% but it doesnt works.All !important are on their places. Have anyone any ideas about this issue.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta name="viewport"
content="min-width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no, date=no">
<meta charset="UTF-8">
<title>Title</title>
<style>
a[href^="x-apple-data-detectors:"] {
color: inherit;
text-decoration: inherit;
}
html {
/*-webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -o-font-smoothing: antialiased;*/
}
</style>
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
</head>
<body style="-webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -o-font-smoothing: antialiased; ">
<style>
#media screen and (max-width: 650px) {
table {
border-spacing: 0;
}
.container {
width: 100% !important;
max-width: 600px;
min-width: 0 !important;
}
.resp-td {
width: 239px !important;
max-width: 100%;
margin: 0 auto;
display: block;
padding: 0 !important;
}
.resp-td {
width: 100% !important;
}
.resp-td {
padding: 0 0 50px 0 !important;
}
.number-color a {
color: #9a9b9b !important;
text-decoration: none !important;
}
* {
-webkit-text-size-adjust: none;
box-sizing: border-box !important;
}
}
#media screen and (max-width: 380px) {
.resp-td {
/*width: 68.3% !important;*/
}
}
#media screen and (max-width: 320px) {
.resp-td {
/*width: 82.3% !important;*/
}
}
</style>
<!--[if gte mso 9]>
<style>
ul, ol, dl {
display: block;
list-style-position: outside !important;
margin: 0 0 10px 18px;
padding: 0;
text-align: left;
}
ul li {
margin: 0 0 0 10px;
padding-left: 20px;
}
ol li {
margin: 0 0 0 10px;
padding-left: 20px;
}
li:last-child, li:last-of-type {
margin-bottom: 0;
}
dt {
font-weight: bold;
line-height: 18px;
margin: 0 0 4px;
padding: 0;
text-align: left;
vertical-align: middle;
}
dd {
line-height: 18px;
margin: 0 0 8px;
padding: 0;
text-align: left;
vertical-align: middle;
}
</style>
<![endif]-->
<table align="center" cellpadding="0" cellspacing="0"
style="background-color:#ffffff; font-family: sans-serif; margin:0; padding:0; width:100% !important; text-align: left; border-spacing: 0; border-collapse: collapse; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -o-font-smoothing: antialiased;mso-cellspacing: 0; mso-padding-alt: 0;">
<tbody>
<tr>
<td>
<table cellpadding="0" cellspacing="0" class="container" align="center" width="600"
style="mso-cellspacing: 0; mso-padding-alt: 0;border-collapse: collapse; border-spacing: 0; width: 600px; max-width: 600px; min-width: 600px;margin: 0 auto; font-family: sans-serif;">
<tbody>
<tr>
<td style="padding-left: 10px; padding-right: 10px;">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td class="resp-td" width="33.3%" style="padding-right: 6px;">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#BF1C1F">
<tbody>
<tr>
<td style="padding: 10px 0 10px 0">
<a href="#"><p
style="color: #ffffff; font-family: sans-serif;
font-size: 15px;
font-weight: 700;
line-height: 25px;margin: 0; padding:0; text-align: center;">Lorem
Ipsum</p></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td class="resp-td" width="33.3%" style="padding-left: 4px;padding-right: 4px;">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#BF1C1F">
<tbody>
<tr>
<td style="padding: 10px 0 10px 0">
<a href="#"><p
style="color: #ffffff; font-family: sans-serif;
font-size: 15px;
font-weight: 700;
line-height: 25px;margin: 0; padding:0; text-align: center;">Lorem
Ipsum</p></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td class="resp-td" width="33.3%" style="padding-left: 6px;">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#BF1C1F">
<tbody>
<tr>
<td style="padding: 10px 0 10px 0">
<a href="#"><p
style="color: #ffffff; font-family: sans-serif;
font-size: 15px;
font-weight: 700;
line-height: 25px;margin: 0; padding:0; text-align: center;">Lorem
Ipsum</p></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
It should be under by one. Like block elements. Ordinary display block doesnt helpd at all. And I have collapsing of other 2 elements

It seems for such layout http://prntscr.com/m2xzf8 and more in a row better to replace <td> with <th> and the problem is solved and you will have this outlook http://prntscr.com/m2xzuh except of this http://prntscr.com/m2y02e.

Not able to resize table to fit image in table

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mizona</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<meta property="og:title" content="{{My.Campaign-Meta-Title}}" />
<meta property="og:description" content="{{My.Campaign-Meta-Description}}" />
<meta property="og:image" content="{{My.Campaign-Meta-Image}}" />
<meta name="description" content="{{My.Campaign-Meta-Description}}" />
<meta name="keywords" content="{{My.Campaign-Meta-Keywords}}" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="#eOriginal" />
<meta name="twitter:creator" content="#eOriginal" />
<meta name="twitter:title" content="{{My.Campaign-Meta-Title}}" />
<meta name="twitter:description" content="{{My.Campaign-Meta-Description}}" />
<meta name="twitter:image" content="{{My.Campaign-Meta-Image}}" />
<style type="text/css">
#logo img {
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
width: auto;
float: none !important;
clear: both;
display: block;
}
td {
word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; font-family:'Verdana', 'Arial', sans-serif; font-weight:normal; line-height:19px; font-size:12px; margin:0; padding:0;
}
.desktop-only {
display: block;
}
.mobile-only {
display: none;
}
.no-spacing {
margin: 0px;
padding: 0px;
}
img {
max-width: 100%;
}
#cover-img img {
max-width: 100%;
margin-bottom: 30px;
}
#cover-content ul {
padding-left: 15px;
}
#socialicons img {
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
width: auto;
float: none !important;
clear: both;
display: inline-block !important;
border: none;
}
#graphic img {
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
width: auto;
max-width: 100%;
float: none !important;
clear: both;
display: inline-block !important;
}
.pad-right-5 {
padding-right: 5px;
}
.pad-right-10 {
padding-right: 10px;
}
.pad-right-20 {
padding-right: 20px;
}
.pad-top-10 {
padding-top: 10px;
}
#content-middle a{
color: #0EABD6;
}
.inner {
padding: 10px 40px;
}
.two-column {
font-size: 0;
}
.two-column .rcolumn {
width: 100%;
max-width: 300px;
display: inline-block;
vertical-align: top;
}
.mobile-center {
text-align: left !important;
}
#media only screen and (max-width: 600px) {
.pad-right-10 {
padding-right: 0px;
}
.pad-right-20 {
padding-right: 0px;
}
.desktop-only {
display: none !important;
}
.mobile-center {
text-align: center !important;
}
.mobile-only {
display: block;
}
#logo img {
width: 100% !important;
}
#logo-mobile img {
width: 80% !important;
}
#graphic img {
width: 100% !important;
height: auto !important;
}
*[class].center {
text-align:center !important;
margin:0 auto !important;
}
*[class].bottom-pad{ padding-bottom:35px !important;}
table[class="body"] table.columns td {
width: auto !important;
}
table[class="body"] table.column td .list {
width: auto !important;
}
table[class="body"] img {
/*width: auto !important;*/
height: auto !important;
max-width: 100% !important;
}
table[class="body"] center {
min-width: 0 !important;
}
table[class="body"] .container {
width: 100% !important;
}
table[class="body"] .row {
width: 100% !important;
display: block !important;
}
table[class="body"] .wrapper {
display: block !important;
padding-right: 0 !important;
}
table[class="body"] .columns {
table-layout: fixed !important;
float: none !important;
width: 100% !important;
padding-right: 0px !important;
padding-left: 0px !important;
display: block !important;
}
table[class="body"] .column {
table-layout: fixed !important;
float: none !important;
width: 100% !important;
padding-right: 0px !important;
padding-left: 0px !important;
display: block !important;
}
table[class="body"] .wrapper.first .columns {
display: table !important;
}
table[class="body"] .wrapper.first .column {
display: table !important;
}
table[class="body"] table.columns td {
width: 100% !important;
}
table[class="body"] table.column td {
width: 100% !important;
}
table[class="body"] .columns td {
width: 100% !important;
display: block;
}
table[class="body"] .column td {
width: 100% !important;
display: block;
}
table[class="body"] td.offset-by-one {
padding-left: 0 !important;
}
table[class="body"] td.offset-by-two {
padding-left: 0 !important;
}
table[class="body"] td.offset-by-three {
padding-left: 0 !important;
}
table[class="body"] td.offset-by-four {
padding-left: 0 !important;
}
table[class="body"] td.offset-by-five {
padding-left: 0 !important;
}
table[class="body"] td.offset-by-six {
padding-left: 0 !important;
}
table[class="body"] td.offset-by-seven {
padding-left: 0 !important;
}
table[class="body"] td.offset-by-eight {
padding-left: 0 !important;
}
table[class="body"] td.offset-by-nine {
padding-left: 0 !important;
}
table[class="body"] td.offset-by-ten {
padding-left: 0 !important;
}
table[class="body"] td.offset-by-eleven {
padding-left: 0 !important;
}
table[class="body"] table.columns td.expander {
width: 1px !important;
}
table[class="body"] .right-text-pad {
padding-left: 10px !important;
}
table[class="body"] .text-pad-right {
padding-left: 10px !important;
}
table[class="body"] .left-text-pad {
padding-right: 10px !important;
}
table[class="body"] .text-pad-left {
padding-right: 10px !important;
}
table[class="body"] .hide-for-small {
display: none !important;
}
table[class="body"] .show-for-desktop {
display: none !important;
}
table[class="body"] .show-for-small {
display: inherit !important;
}
table[class="body"] .hide-for-desktop {
display: inherit !important;
}
.social-icon td img {
width: 40px !important;
height: 40px !important;
}
}
</style>
</head>
<body style="width:100% !important; min-width:100%; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; text-align:left; line-height:19px; font-size:12px; margin:0; padding:0; background:#eeeeee; ">
<table class="body" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:left; height:100%; width:100%; line-height:19px; font-size:12px; background:#eeeeee; margin:0; padding:0; " bgcolor="#EEEEEE">
<tbody>
<tr style="vertical-align:top; text-align:left; padding:0; " align="left">
<td class="center" align="center" valign="top" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:center; font-weight:normal; line-height:19px; font-size:12px; margin:0; padding:0; ">
<center style="width:100%; min-width:580px; ">
<table class="container mktoContainer" id="template-wrapper" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:inherit; width:580px; background:#ffffff; margin:0 auto; padding:0; " bgcolor="#FFFFFF">
<tr class="mktoModule" id="main-header" mktoname="main-header" style="vertical-align:top; text-align:left; padding:0; " align="left">
<td class="center" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; vertical-align:top; text-align:left; margin:0; padding:0;" align="left" valign="top">
<table class="row" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:left; width:100%; position:relative; display:block; padding:0px; ">
<tbody>
<tr style="vertical-align:top; text-align:left; padding:0; " align="left">
<td class="wrapper last center" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:left; position:relative; color:#555555; line-height:19px; -webkit-transition:font-size 1s ease-in-out !important; font-size:12px; margin:0; padding:0px; " align="left" valign="top">
<table class="twelve columns center desktop-only" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:left; width:580px; padding:0; display:table !important; ">
<tbody>
<tr style="vertical-align:top; text-align:left; padding:0; " align="left">
<td class="center" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:left; color:#555555; line-height:19px; -webkit-transition:font-size 1s ease-in-out !important; font-size:12px; margin:0; padding:0px; " align="left" valign="top">
<div class="mktEditable" id="logo" style="" mktoname="logo">
<img src="http://info.eoriginal.com/rs/907-BBE-942/images/email header.jpg" alt="eO Logo White.png" constrain="true" imagepreview="false" style="max-width: 600px;" />
</div></td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
<tr class="mktoModule" id="intro-with-image" mktoname="intro-with-image" style="vertical-align:top; text-align:left; padding:0; color: #555555;" align="left">
<td>
<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td width="600" style="background-color:#ece9e2;"><img src="http://info.eoriginal.com/rs/907-BBE-942/images/Season Greetings.jpg" alt="left" /></td>
</tr>
</tbody>
</table> </td>
</tr>
<tr class="mktoModule" id="padding" mktoname="padding" style="vertical-align:top; text-align:left; padding:0; color: #555555;" align="left">
<td style="padding: 10px 40px"> </td>
</tr>
<tr class="mktoModule" id="text-benefits" mktoname="text-benefits" style="vertical-align:top; text-align:left; padding:0; color: #555555;" align="left">
<td style="padding: 0px 40px">
<table class="columns">
<tbody>
<tr valign="top">
<td>
<div class="mktEditable" id="cover-content" mktoname="cover-content">
<p style="font-family: Verdana, Arial; color: #353937; text-align: center;">{{lead.First Name:default=Hi}},</p>
<p style="font-family: Verdana, Arial; color: #353937; text-align: center;">It is our pleasure this holiday season to extend to you our warmest greetings and best wishes for a happy holiday and a prosperous new year.</p>
<p><img src="http://info.eoriginal.com/rs/907-BBE-942/images/holidayphoto EDIT CROP.jpg" alt="left" width="500" style="display: block; margin-left: auto; margin-right: auto;" /></p>
<p style="font-family: Verdana, Arial; color: #353937; text-align: center;">Wishing you a season of joy and continued success into 2019.</p>
<p style="font-family: Verdana, Arial; color: #353937; text-align: center;">Sincerely,</p>
<p style="font-family: Verdana, Arial; color: #353937; text-align: center;">The eOriginal Team</p>
</div> </td>
</tr>
</tbody>
</table> </td>
</tr>
<tr class="mktoModule" id="bottom-cta" mktoname="bottom-cta" style="vertical-align:top; padding:0;">
<td style="padding: 0px 40px;" align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td bgcolor="#0EABD6" style="padding: 12px 18px 12px 18px; border-radius:0px" align="center">
<div id="cta2" class="mktEditable" style="" mktoname="cta2">
<p class="no-spacing" style="font-family: Verdana, Arial;">Click Here</p>
</div> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
<tr class="mktoModule" id="padding-sm" mktoname="padding-sm" style="vertical-align:top; padding:0;">
<td style="padding: 10px 40px;" align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center"> </td>
</tr>
</tbody>
</table> </td>
</tr>
<tr class="mktoModule" id="social" mktoname="social" bgcolor="#2EA049">
<td class="two-column" style="font-size: 0; text-align: center;">
<!--[if (gte mso 9)|(IE)]>
<table width="100%">
<tr>
<td width="50%" valign="top">
<![endif]-->
<div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;">
<table width="100%">
<tbody>
<tr>
<td class="inner mobile-center" style="font-size: 10px; color: #FFFFFF; padding: 20px 40px;"> eOriginal.com </td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="50%" valign="top">
<![endif]-->
<div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;">
<table width="100%">
<tbody>
<tr>
<td class="inner" style="font-size: 10px; color: #FFFFFF; padding: 10px 40px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width: 100%">
<tbody>
<tr>
<td align="left" valign="middle" width="50"><img alt="Twitter" src="https://eoriginal.wise-portal.com/newsletter/public/social-twitter-icon.png" style="color: #FFFFFF; font-size: 12px; " width="40" height="40" /></td>
<td align="left" valign="middle" width="50"><img alt="LinkedIn" src="https://eoriginal.wise-portal.com/newsletter/public/social-linkedin-icon.png" style="color: #FFFFFF; font-size: 12px; " width="40" height="40" /></td>
<td align="left" valign="middle" width="50"><img alt="Facebook" src="https://eoriginal.wise-portal.com/newsletter/public/social-facebook-icon.png" style="color: #FFFFFF; font-size: 12px;" width="40" height="40" /></td>
<td align="left" valign="middle" width="50"><img alt="Blog" src="https://eoriginal.wise-portal.com/newsletter/public/social-blog-icon.png" style="color: #FFFFFF; font-size: 12px; " width="40" height="40" /></td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--> </td>
</tr>
<tr class="mktoModule" id="footer" mktoname="footer" bgcolor="#353937">
<td class="two-column" style="font-size: 0; text-align: center;">
<!--[if (gte mso 9)|(IE)]>
<table width="100%">
<tr>
<td width="50%" valign="top">
<![endif]-->
<div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;">
<table width="100%">
<tbody>
<tr>
<td class="inner mobile-center" style="font-size: 10px; color: #FFFFFF; padding: 10px 40px;"> <img src="http://info.eoriginal.com/rs/907-BBE-942/images/nl-footer-logo-v2.2.png" width="200" /><br /><br /> <span>© 2018 eOriginal, Inc. All rights reserved.</span> </td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="50%" valign="top">
<![endif]-->
<div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;">
<table width="100%">
<tbody>
<tr>
<td class="inner mobile-center" style="font-size: 10px; color: #FFFFFF; padding: 10px 40px;"> The Warehouse at Camden Yards<br /> 351 W. Camden St., Suite 800<br /> Baltimore, MD 21201<br /><br /> SALES <span style="color: #2EA049">1-866-935-1776</span><br />SUPPORT <span style="color: #2EA049">1-866-364-3578</span> </td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--> </td>
</tr>
</table>
</center></td>
</tr>
</tbody>
</table>
</body>
</html>
As you can see from above code I'm getting the table with image inside, but the table seems to be a little big bigger at the bottom, causing it to have a thin grey bar. How can I make the image to fit the table or the table to fit the image? I have try height and it didn't seem to work. I have added height value to the image to fit table size and I have also try to add height value to fit image size, but it didn't seem to work.

The cause of the problem would be line-height:19px;

change the height and width of the image to 100%, this will fit the image inside the table div

HTML Email - How to achieve spacing between links on same row in ALL email clients

On a typical HTML webpage, this would be very easy. For email, not so much.
I'm sure you're all familiar with the challenges of getting email clients to render things consistently. It basically throws divs out the window.
I'm concerned with the About, Practice Areas, etc. links..
Here's what I'd like to achieve
That's how it renders in a web browser, which is perfect.
But this is what I get in Outlook 2010.
My problem is.. I need to use text-align:center on the parent element to center everything. But in Outlook 2010, it stacks the children elements vertically instead of lining up in one row.
When I change it so I have just links inside the table (as opposed to nesting tables), I lose all padding on the links.
No padding on links..
Is there any way to do this?
<!DOCTYPE HTML>
<html>
<HEAD>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta charset="utf-8">
<title>|Jan '18|</title>
<style type="text/css">
#media(max-width: 500px) {
.frame {
width: 97% !important;
}
.fullIMG {
width: 100% !important;
}
#contentGrid {
padding: 10px 20px !important;
}
}
</style>
</head>
<BODY>
<!-- Beginning of white background table -->
<table align="center" cellspacing="0" cellpadding="0" border="0" style="width: 550px; background-color: white; border-left:1px solid black; border-right:1px solid black; opacity:.95" class="frame">
<tr>
<td>
<!-- Pre-Header -->
<tr>
<td style="text-align:center; padding: 0px 20px;">
<p style="font-family: Arial, Helvetica, sans-serif; line-height: 20px"><i>We have collected <strong>MORE THAN $1 BILLION</strong> for thousands of clients.</i></p>
</td>
</tr>
<!-- End of Pre-Header -->
<!-- Header Row -->
<tr>
<td>
<!-- Header Table -->
<table align="center" style="padding: 10px 20px 0px 20px;">
<tr>
<td align="center">
<a href="https://www.hupy.com/" target="_blank">
<img alt="Voted Best, Rated Vest" style="width: 90%; height: auto; " src="https://image.ibb.co/nai2NG/logo_tight.jpg"/>
</a>
</td>
</tr>
</table>
<!-- End of Header Table -->
</td>
</tr>
<!-- End of Header Row -->
<!-- Homebase Links Row -->
<tr>
<td>
<hr align="center" style="width:90%;">
<!-- Homebase Links Table -->
<table align="center">
<tr>
<td>
<table align="left" style="padding: 10px;">
<tr>
<td>
<a style="text-decoration: none; color: black; font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 30px; text-shadow: 1px 1px 3px rgba(165,42,42,.7);" href="https://www.hupy.com/aboutus.cfm"><strong>About</strong></a>
</td>
</tr>
</table>
<table align="left" style="padding: 10px;">
<tr>
<td>
<a style="text-decoration: none; color: black; font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 30px;text-shadow: 1px 1px 3px rgba(165,42,42,.7);" href="https://www.hupy.com/practice_areas/"><strong>Practice Areas</strong></a>
</td>
</tr>
</table>
<table align="left" style="padding: 10px;">
<tr>
<td>
<a style="text-decoration: none; color: black; font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 30px; text-shadow: 1px 1px 3px rgba(165,42,42,.7);" href="https://www.hupy.com/library/"><strong>Legal Info</strong></a>
</td>
</tr>
</table>
<table align="left" style="padding: 10px;">
<tr>
<td>
<a style="text-decoration: none; color: black; font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 30px; text-shadow: 1px 1px 3px rgba(165,42,42,.7);" href="https://www.hupy.com/case-results.cfm"><strong>Results</strong></a>
</td>
</tr>
</table>
<table align="left" style="padding: 10px;">
<tr>
<td>
<a style="text-decoration: none; color: black; font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 30px; text-shadow: 1px 1px 3px rgba(165,42,42,.7);" href="https://www.hupy.com/contact.cfm"><strong>Contacts</strong></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End of Homebase Links Table -->
</td>
</tr>
<!-- End of Homebase Row -->
<!-- Snipppet Row -->
<tr>
<td style="padding: 0px 20px" align="center">
<h2 style="font-family: Helvetica; font-size: 25px; text-align:left;">CASE RESULT: $1.5 Million for Rider Struck by Inattentive Driver</h2>
<a href="https://www.hupy.com/case_results/-1-5-million-for-rider-struck-by-inattentive-driver.cfm" target="blank">
<img class="fullIMG" src="https://image.ibb.co/eNfVbb/1_5mill.jpg" alt="$1.5 Million" style="width: 100%; height: auto; box-shadow: 3px 3px 5px rgba(165,42,42,.7)">
</a>
<p style="font-family: Helvetica; font-size: 16px; line-height: 24px; text-align:left;">In July 2017, our client and his wife were on a casual motorcycle ride in Waukesha County when the driver of a minivan failed to see their motorcycle and turned left in front of them. A terrible crash occurred and both occupants of the motorcycle were ejected. Find out what happened when Hupy and Abraham fought the insurance company to get a $1.5 million settlement.</p>
</td>
</tr>
<tr>
<td>
Click me
</td>
</tr>
<!-- End of Snippet Row -->
<!-- Facebook Fans Row -->
<tr>
<td>
<!-- Facebook Fans Table -->
<table align="center" style="padding: 20px 20px 0px 20px;">
<tr>
<td align="center">
<a href="https://www.facebook.com/HupyandAbraham/">
<img src="https://preview.ibb.co/e6mYUw/18000fans_tight.jpg" alt="18000fans" style="width: 85%; height: auto;">
</a>
</td>
</tr>
</table>
<!-- End of Facebook Fans Table -->
</td>
</tr>
<!-- End of Facebook Fans Row -->
<!-- Social Links Row -->
<tr>
<td>
<!-- Social Links Table -->
<table align="center" cellspacing="5" cellpadding="5" border="0">
<tr align="center">
<td align="center">
<a href="https://twitter.com/HupyandAbraham" target="_blank" style="text-decoration: none;">
<img style="filter: drop-shadow(1px 1px 3px #1DA1F2);" alt="Twitter link" src="https://cdn-images.mailchimp.com/icons/social-block-v2/outline-dark-twitter-96.png">
</a>
<a href="https://www.youtube.com/user/hupyandabrahamSC" target="_blank" style="text-decoration: none;">
<img style="filter: drop-shadow(1px 1px 3px #ff0000);" alt="YouTube link" src="https://cdn-images.mailchimp.com/icons/social-block-v2/outline-dark-youtube-96.png">
</a>
<a href="http://instagram.com/hupyandabraham" target="_blank" style="text-decoration: none;">
<img style="filter: drop-shadow(1px 1px 3px #C32AA3);" alt="Instagram link" src="https://cdn-images.mailchimp.com/icons/social-block-v2/outline-dark-instagram-96.png">
</a>
</td>
</tr>
<tr align="center">
<td>
<a href="https://www.pinterest.com/hupyandabraham/" target="_blank" style="text-decoration: none;">
<img style="filter: drop-shadow(1px 1px 3px #BD081C);" alt="Pinterest link" src="https://cdn-images.mailchimp.com/icons/social-block-v2/outline-dark-pinterest-96.png">
</a>
<a href="https://www.linkedin.com/company/hupy-&-abraham" target="_blank" style="text-decoration: none;">
<img style="filter: drop-shadow(1px 1px 3px #007BB5);" alt="Pinterest link" src="https://cdn-images.mailchimp.com/icons/social-block-v2/outline-dark-linkedin-96.png">
</a>
<a href="https://plus.google.com/+HupyandAbrahamSC" target="_blank" style="text-decoration: none;">
<img style="filter: drop-shadow(1px 1px 3px #DB4437);" alt="Pinterest link" src="https://cdn-images.mailchimp.com/icons/social-block-v2/outline-dark-googleplus-96.png">
</a>
</td>
</tr>
</table>
<!-- End of Social Links Table -->
</td>
</tr>
<!-- End Social Links Row -->
</td>
</tr>
</table>
<!-- End of white background table -->
</BODY>
</html>

Okay so here is a revised HTML email template.
First - you have to do a few things. Outlook is super secondary, but unfortunately people still use it. It's horrible.
So you account for that in quite a few ways - in the code and within the header. Luckily your email isn't TOO tricky, so there wasn't any real call for !mso in the body of the email.
Secondly - try to make your emails ALSO responsive. Remember that 75% of ALL email is read on a phone. Your email looked like a bit of a mashup. Not in a bad way.
The header links were lining all straight down on Outlook because you had EACH ONE in it's own table. Outlook interpreted that to be tables (obviously) and made each one 100% of the email width. If you place the links inside a table and then each one inside a <td> you will get better results.
lastly, there are some interesting shading things going on your email that may or may NOT work in all email clients. I left them but I'd be surprised if they did.
I'd say that you can probably take this code and place it into almost any ESP and it should work. You have to always be mindful of who you are coding emails for, and keep that in mind when it comes to how you design.
Good luck! There's lots more so if you have a question, go ahead and ask.
<!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: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" />
<meta name="format-detection" content="date=no"/>
<meta name="format-detection" content="telephone=no"/>
<!--[if !mso]><!-- -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<title>Royal Caribbean - Advantage Program</title>
<style type="text/css">
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;
}
u + #body a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
#outlook a{
padding:0;
}
.ReadMsgBody{
width:100%;
}
body{
width:100% !important;
min-width:100%;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
-webkit-font-smoothing: antialiased;
}
v*{
behavior:url(#default#VML);
display:inline-block;
}
.ExternalClass{
width:100%;
}
td{
border-collapse: separate !important;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div{
line-height:100%;
}
a img{
border:none;
}
a {
text-decoration:none !important;
}
img{
display:block;
outline:none;
text-decoration:none;
border:none;
-ms-interpolation-mode: bicubic;
}
table{
border-spacing:0;
border-collapse:separate;
mso-table-lspace:0pt;
mso-table-rspace:0pt;
}
table[class=full] {
width: 100%;
clear: both;
}
div {
padding: 0;
margin: 0;
}
p{
margin:0;
padding:0;
border:0;
font-size:100%;
line-height:1.4em;
font-family: Helvetica, Arial, sans-serif;
}
h1{
margin:0;
padding:0;
border:0;
font-size:100%;
line-height:1.4em;
font-family: Helvetica, Arial, sans-serif;
}
#wrappertable{
margin:0;
padding:0;
width:100% !important;
line-height:100% !important;
}
br[class=show]{
display: none !important;
max-height: 0px;
font-size: 0px;
overflow: hidden;
mso-hide: all;
}
#media screen and (max-width:600px){
table{
width:100% !important;
}
table[class=content]{
width:95% !important;
}
td[class=hide]{
display: none !important;
max-height: 0px !important;
font-size: 0px !important;
overflow: hidden !important;
mso-hide: all !important;
width: 0 !important;
}
td[class=fullwidth]{
width:100% !important;
float:left !important;
}
/*replace image with mobile version*/
td#pic1 img{
content:url("") !important;
}
/*repeat ID as necessary*/
img[class=fullwidth]{
width:100% !important;
height:auto !important;
}
img[class=threequarters]{
float: none !important;
width: 75% !important;
height: auto !important;
margin: auto !important;
}
img[class=twothirds]{
float: none !important;
width: 66.6666% !important;
height: auto !important;
margin: auto !important;
}
img[class=halfwidth]{
float: none !important;
width: 50% !important;
height: auto !important;
margin: auto !important;
}
img[class=onethird]{
width: 33.3333% !important;
height: auto !important;
margin: auto !important;
padding-top: 5px !important;
padding-bottom: 5px !important;
}
img[class=quarterwidth]{
width: 25% !important;
height: auto !important;
margin: auto !important;
padding-top: 5px !important;
padding-bottom: 5px !important;
}
img[class=hide]{
display: none !important;
max-height: 0px !important;
font-size: 0px !important;
overflow: hidden !important;
mso-hide: all !important;
width: 0 !important;
}
div[class=fullwidth]{
max-width: 95% !important;
}
p,h1,h2[class=centered]{
text-align: center !important;
}
br[class=show]{
display: inline !important;
}
br[class=hide]{
display: none !important;
max-height: 0px;
font-size: 0px;
overflow: hidden;
mso-hide: all;
}
span[class=hide]{
display: none !important;
max-height: 0px;
font-size: 0px;
overflow: hidden;
mso-hide: all;
}
}
</style>
</head>
<body marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" offset="0" bgcolor="#eeeeee" style="padding: 0 !important; margin:0 !important;">
<center>
<table width="100%" style="border-collapse:collapse; table-layout:fixed;" border="0" cellspacing="0" cellpadding="0" id="wrappertable">
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" border="0" width="620" bgcolor="#f9f9f9" style="box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.10);">
<tr>
<td width="618" align="center">
<!--THIS IS THE CONTENT TABLE-->
<table cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
<td align="center">
<p style="font-family: Arial, Helvetica, sans-serif; line-height: 20px"><i>We have collected <strong>MORE THAN $1 BILLION</strong> for thousands of clients.</i></p>
</td>
</tr>
<!--use empty rows for spacing-->
<tr><td height="20" style="line-height: 20px; font-size: 1px;"> </td></tr>
<tr>
<td align="center">
<img src="https://image.ibb.co/nai2NG/logo_tight.jpg" alt="Voted Best, Rated Vest" width="580" height="150" class="fullwidth"/>
</td>
</tr>
<tr>
<td align="center" height="40" style="line-height: 40px;">
<hr align="center" width="80%" size="1" noshade="noshade"/>
</td>
</tr>
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" border="0" class="content" width="95%">
<tr>
<td class="fullwidth" align="center">
<a style="text-decoration: none; color: black; font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 30px; text-shadow: 1px 1px 3px rgba(165,42,42,.7);" href="https://www.hupy.com/aboutus.cfm"><strong>About</strong></a>
</td>
<td class="fullwidth" align="center">
<a style="text-decoration: none; color: black; font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 30px;text-shadow: 1px 1px 3px rgba(165,42,42,.7);" href="https://www.hupy.com/practice_areas/"><strong>Practice Areas</strong></a>
</td>
<td class="fullwidth" align="center">
<a style="text-decoration: none; color: black; font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 30px; text-shadow: 1px 1px 3px rgba(165,42,42,.7);" href="https://www.hupy.com/library/"><strong>Legal Info</strong></a>
</td>
<td class="fullwidth" align="center">
<a style="text-decoration: none; color: black; font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 30px; text-shadow: 1px 1px 3px rgba(165,42,42,.7);" href="https://www.hupy.com/case-results.cfm"><strong>Results</strong></a>
</td>
<td class="fullwidth" align="center">
<a style="text-decoration: none; color: black; font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 30px; text-shadow: 1px 1px 3px rgba(165,42,42,.7);" href="https://www.hupy.com/contact.cfm"><strong>Contacts</strong></a>
</td>
</tr>
</table>
</td>
</tr>
<tr><td height="20" style="line-height: 20px; font-size: 1px;"> </td></tr>
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" border="0" class="content" width="95%">
<tr>
<td align="center">
<h2 style="font-family: Helvetica; font-size: 25px; text-align:left; line-height: 32px;">CASE RESULT: $1.5 Million for Rider Struck by Inattentive Driver</h2>
</td>
</tr>
<tr><td height="10" style="line-height: 10px; font-size: 1px;"> </td></tr>
<tr>
<td align="center">
<a href="https://www.hupy.com/case_results/-1-5-million-for-rider-struck-by-inattentive-driver.cfm" target="blank">
<img src="https://image.ibb.co/eNfVbb/1_5mill.jpg" alt="$1.5 Million" width="580" height="325" style="box-shadow: 3px 3px 5px rgba(165,42,42,.7)" class="fullwidth">
</a>
</td>
</tr>
<tr><td height="10" style="line-height: 10px; font-size: 1px;"> </td></tr>
<tr>
<td align="left">
<p style="font-family: Helvetica; font-size: 16px; line-height: 24px; text-align:left;">In July 2017, our client and his wife were on a casual motorcycle ride in Waukesha County when the driver of a minivan failed to see their motorcycle and turned left in front of them. A terrible crash occurred and both occupants of the motorcycle were ejected. Find out what happened when Hupy and Abraham fought the insurance company to get a $1.5 million settlement.</p>
</td>
</tr>
<tr><td height="20" style="line-height: 20px; font-size: 1px;"> </td></tr>
</table>
</td>
</tr>
<tr>
<td align="center">
<a href="https://www.facebook.com/HupyandAbraham/">
<img src="https://preview.ibb.co/e6mYUw/18000fans_tight.jpg" alt="18000fans" width="500" height="183" class="fullwidth">
</a>
</td>
</tr>
<tr><td height="20" style="line-height: 20px; font-size: 1px;"> </td></tr>
<tr>
<td align="center">
<table align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="center">
<a href="https://twitter.com/HupyandAbraham" target="_blank" style="text-decoration: none;">
<img style="filter: drop-shadow(1px 1px 3px #1DA1F2); padding-left: 10px; padding-right: 10px;" alt="Twitter link" src="https://cdn-images.mailchimp.com/icons/social-block-v2/outline-dark-twitter-96.png">
</a>
</td>
<td align="center">
<a href="https://www.youtube.com/user/hupyandabrahamSC" target="_blank" style="text-decoration: none;">
<img style="filter: drop-shadow(1px 1px 3px #ff0000); padding-left: 10px; padding-right: 10px;" alt="YouTube link" src="https://cdn-images.mailchimp.com/icons/social-block-v2/outline-dark-youtube-96.png">
</a>
</td>
<td align="center">
<a href="http://instagram.com/hupyandabraham" target="_blank" style="text-decoration: none;">
<img style="filter: drop-shadow(1px 1px 3px #C32AA3); padding-left: 10px; padding-right: 10px;" alt="Instagram link" src="https://cdn-images.mailchimp.com/icons/social-block-v2/outline-dark-instagram-96.png">
</a>
</td>
</tr>
<tr><td colspan="3" height="20" style="line-height: 20px;"> </td></tr>
<tr>
<td align="center">
<a href="https://www.pinterest.com/hupyandabraham/" target="_blank" style="text-decoration: none;">
<img style="filter: drop-shadow(1px 1px 3px #BD081C); padding-left: 10px; padding-right: 10px;" alt="Pinterest link" src="https://cdn-images.mailchimp.com/icons/social-block-v2/outline-dark-pinterest-96.png">
</a>
</td>
<td align="center">
<a href="https://www.linkedin.com/company/hupy-&-abraham" target="_blank" style="text-decoration: none;">
<img style="filter: drop-shadow(1px 1px 3px #007BB5); padding-left: 10px; padding-right: 10px;" alt="Pinterest link" src="https://cdn-images.mailchimp.com/icons/social-block-v2/outline-dark-linkedin-96.png">
</a>
</td>
<td align="center">
<a href="https://plus.google.com/+HupyandAbrahamSC" target="_blank" style="text-decoration: none;">
<img style="filter: drop-shadow(1px 1px 3px #DB4437); padding-left: 10px; padding-right: 10px;" alt="Pinterest link" src="https://cdn-images.mailchimp.com/icons/social-block-v2/outline-dark-googleplus-96.png">
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</body>
</html>

To make a table responsive, just add a media querie like that (direct child selector doesn't affect tables inside this table) :
Code
<table class="responsive-table">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
The media queries :
<style>
#media all and ( max-width: 600px ) {
.responsive-table, .responsive-table > tbody, .responsive-table > tbody > tr, .responsive-table > tbody > tr > td {
display: block !important;
width: 100% !important;
}
}
</style>
You can ajust for your needs

We Keep Coding

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

html email template table header alignment - html

Related

White spaces in the html for email design using table tags

How to make a table stack on mobile?

Why does the elements in row are collapsing on apple mail agent on responsive layout?

Not able to resize table to fit image in table

HTML Email - How to achieve spacing between links on same row in ALL email clients

Categories

Resources