I'm composing an Email Signature with tables.
There is an issue when I'm testing it in older versions of Outlook.
That's how it's rendered
That's how it's supposed to look
It works just fine when I test the actual code with Putsmail, but when I paste in the signature in the email client and send it, it simply breaks.
Help, please!
My code:
<!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" lang="en" xml:lang="en"
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 http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>HTML Email Template Boilerplate</title>
<style type='text/css'>
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#400;600&display=swap');
body {
Margin: 0;
padding: 0;
}
table {
border-spacing: 0;
}
td {
padding: 0;
}
img {
border: 0;
}
p {
margin: 0;
padding: 0;
}
#media screen and (max-width:599.98px) {
}
#media screen and (max-width:399.98px) {
}
:root {
color-scheme: light dark;
supported-color-schemes: light dark;
}
#media (prefers-color-scheme: dark) {
}
</style>
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {border-collapse: collapse!important;}
</style>
<![endif]-->
<!-- FIXES 120 DPI-->
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
</head>
<body style="Margin: 0;padding:0;min-width: 100%;background-color:#ffffff;">
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
body {background-color: #ffffff !important;}
body, table, p, a, td {font-family:Arial,Helvetica,sans-serif!important;}
</style>
<![endif]-->
<div style="max-width: 600px; background-color: #ffffff;">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" style="border-spacing:0;
color: #000000;" role="presentation">
<tr>
<td style="padding:0;">
<![endif]-->
<!-- MAIN TABLE START -->
<table align="center" style="border-spacing:0; border-collapse: collapse; color: #000000;
font-family: sans-serif, Arial, Helvetica!important;
background-color: #ffffff; Margin:0; padding: 0;max-width: 600px;" role="presentation">
<tr>
<td style="padding: 50px 0 30px 0; background-color: #f8f8f8;">
<table width="600" style="width: 600px; border-spacing: 0; border-collapse: collapse;" role="presentation">
<tr>
<td width="600" style="width: 600px; padding: 0; font-size: 0; text-align: center; width: 100%; max-width: 600px; display: block;">
<!--[if mso]>
<table width="600" style="border-spacing: 0;border-collapse:collapse; width:600px; display:block;" role="presentation">
<tr>
<td width="300" align="right" valign="middle" style="padding:0;">
<![endif]-->
<table class="column" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; max-width: 300px; display: inline-block;" role="presentation">
<tr>
<td class="padding" style="padding: 10px;">
<table class="content" align="right" style="border-spacing: 0;border-collapse: collapse;" role="presentation">
<tr>
<td style="padding: 0 0 12px 0; font-size: 24px; text-align: right;font-weight: 600;font-family: 'Poppins', Helvetica, Arial,sans-serif !important;">
<span style="font-size: 24px; margin:0;color: #2F3F5A; mso-line-height-rule:exactly; line-height: 24px; text-decoration: none; font-family: 'Poppins', Helvetica, Arial,sans-serif; font-weight: 600;" class="name">
Firstname Surname
</span>
</td>
</tr>
<tr>
<td style="padding: 0; font-size: 24px; text-align: right;font-weight: 600;font-family: 'Poppins', Helvetica, Arial,sans-serif !important;">
<span style="font-size: 24px; margin:0;color: #FF8672; mso-line-height-rule:exactly; line-height: 24px; text-decoration: none; font-family: 'Poppins', Helvetica, Arial,sans-serif; font-weight: 600;" class="job">
Job Title
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if mso]>
</td><td width="300" valign="middle" style="padding:0;">
<![endif]-->
<table class="column" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; max-width: 300px; display: inline-block;" role="presentation">
<tr>
<td class="padding" style="padding: 10px">
<table class="content" style="border-spacing: 0;border-collapse: collapse; text-align: left;" role="presentation">
<tr>
<td style="padding: 0;font-size: 16px;color: #2F3F5A; mso-line-height-rule:exactly; line-height: 24px; text-decoration: none; font-family: 'Poppins', Helvetica, Arial,sans-serif !important; font-weight: 400;">
<a style="color: #2F3F5A; mso-line-height-rule:exactly; line-height: 24px; text-decoration: none; font-family: 'Poppins', Helvetica, Arial,sans-serif; font-weight: 400;" href="mailto:firstname#productprofessionals.com">firstname#productprofessionals.com</a>
</td>
</tr>
<tr>
<td style="padding: 0;font-size: 16px;color: #2F3F5A; mso-line-height-rule:exactly; line-height: 24px; text-decoration: none; font-family: 'Poppins', Helvetica, Arial,sans-serif !important; font-weight: 400;">
<a style="color: #2F3F5A; mso-line-height-rule:exactly; line-height: 24px; text-decoration: none; font-family: 'Poppins', Helvetica, Arial,sans-serif; font-weight: 400;" href="tel:+61 444 123 456">+61 444 123 456</a>
</td>
</tr>
<tr>
<td style="padding: 0;font-size: 16px;color: #2F3F5A; mso-line-height-rule:exactly; line-height: 24px; text-decoration: none; font-family: 'Poppins', Helvetica, Arial,sans-serif !important; font-weight: 400;">
<a style="color: #2F3F5A; mso-line-height-rule:exactly; line-height: 24px; text-decoration: none; font-family: 'Poppins', Helvetica, Arial,sans-serif; font-weight: 400;" href="https://productprofessionals.com" target="_blank">productprofessionals.com</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
<!-- BOTTOM IMAGE START -->
<tr>
<td style="padding: 0;" cellspacing="0" cellpadding="0">
<table width="100%" style="padding: 0; border-spacing: 0; border-collapse: collapse;" role="presentation" cellspacing="0" cellpadding="0">
<img src="https://i.ibb.co/CnTF0HJ/Group-584-4.png" width="640" style="width: 640px; display: block;" border="0" alt="Association of Product Professionals">
</table>
</td>
</tr>
<!-- BOTTOM IMAGE END -->
</table>
<!-- MAIN TABLE END -->
<!--[if mso 9] | (IE)>
</td>
</tr>
</table>
<![endif]-->
</div>
</body>
</html>
The code looks largely good from a structural perspective (tables), but the content you have inserted is larger than that structure.
So you've inserted a 640px wide image in a 600px space, and the right column with the contact details is 322px in a 300px space (watch for the padding:10px, as well as the text width). You can see these things easily in developer tools on your browser.
It worked for me even without fixing these things, but I wasn't able to do a full test yet.
Related
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>
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
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.
I have white space in my table. I've searched the forum but it seem I have everything setup correct. Has it something to do with the images?
Cellpadding is here but no luck.
Does anyone know where it goes wrong? I've tried block to but with no luck, I know I must be missing something but I can't seem to find it.
I can't add any more details to this post.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta name="HandheldFriendly" content="True">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>House of Talents</title>
<style type="text/css">
img {display: inline-block}
.floatRight {float:right;}
.floatLeft {float:none;}
.mobileShow {display: none}
.MPED_ULSortable {margin: 0 !important;padding: 0 !important;}
.cornerAll {border-radius: 0px;}
#media only screen and (max-device-width: 850px), (max-width: 850px) {
.logo {width: 180px;height: auto;}
.marginBottom {
margin-bottom: 15px;
}
.contentTable {
width:100% !important;
float: none !important;
}
td[class="floatLeft"] {
float:left !important;
width: 100% !important;
}
td[class="floatRight"] {
width: 100% !important;
float:right !important;
}
.mobileHide {display:none}
.mobileShow {display: block !important}
.resizeImage img {
width: 100%;
height: auto;
}
}
</style>
</head>
<table cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr>
<td class="MPED_CONTENT">
<div class="MPED_CONTENTBLOCK">
<table border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#FFFFFF">
<tbody>
<tr>
<td align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="width: 850px; max-width: 850px;">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="resizeImage" style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #243e55; font-weight: bold; background-color: #f3716d; width: 425px; padding-left: 60px;" width="425"><br>
<br>
<img src="http://images.m9.mailplus.nl/user3900328/765/arcq_wit_4x.png" border="0" width="150" height="37" mpdatacustomsize="true"><br>
<br>
<span style="color: #e94b5a; font-family: helvetica;"> <br>
</span></td>
<td class="resizeImage" style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #243e55; font-weight: bold; background-color: #f3716d; width: 425px;" width="425"> </td>
</tr>
<tr>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #43565e;">
<blockquote>
<p class="p1"> </p>
</blockquote>
</td>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #43565e;">
<p class="p1"><span style="font-family: helvetica;"><img src="http://images.m9.mailplus.nl/user3900328/131/welcome0.png" border="0" width="425" height="425" mpdatacustomsize="true" ><br>
</span></p>
</td>
</tr>
<tr>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #43565e; line-height: 18px; background-color: #e7f0f7;"> </td>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #43565e; line-height: 18px; background-color: #e7f0f7;"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Your <p> tags are adding margins by default. There is no css class p1 defined, but setting margins to zero on that class will fix this.
Note
I am purposely not addressing the bad practice involved with using tables for layout (or the other myriad other bad practices in this code).
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta name="HandheldFriendly" content="True">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>House of Talents</title>
<style type="text/css">
img {display: inline-block}
.floatRight {float:right;}
.floatLeft {float:none;}
.mobileShow {display: none}
.MPED_ULSortable {margin: 0 !important;padding: 0 !important;}
.cornerAll {border-radius: 0px;}
.p1 { margin: 0 };
#media only screen and (max-device-width: 850px), (max-width: 850px) {
.logo {width: 180px;height: auto;}
.marginBottom {
margin-bottom: 15px;
}
.contentTable {
width:100% !important;
float: none !important;
}
td[class="floatLeft"] {
float:left !important;
width: 100% !important;
}
td[class="floatRight"] {
width: 100% !important;
float:right !important;
}
.mobileHide {display:none}
.mobileShow {display: block !important}
.resizeImage img {
width: 100%;
height: auto;
}
}
</style>
</head>
<table cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr>
<td class="MPED_CONTENT">
<div class="MPED_CONTENTBLOCK">
<table border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#FFFFFF">
<tbody>
<tr>
<td align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="width: 850px; max-width: 850px;">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="resizeImage" style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #243e55; font-weight: bold; background-color: #f3716d; width: 425px; padding-left: 60px;" width="425"><br>
<br>
<img src="http://images.m9.mailplus.nl/user3900328/765/arcq_wit_4x.png" border="0" width="150" height="37" mpdatacustomsize="true"><br>
<br>
<span style="color: #e94b5a; font-family: helvetica;"> <br>
</span></td>
<td class="resizeImage" style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #243e55; font-weight: bold; background-color: #f3716d; width: 425px;" width="425"> </td>
</tr>
<tr>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #43565e;">
<blockquote>
<p class="p1"> </p>
</blockquote>
</td>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #43565e;">
<p class="p1"><span style="font-family: helvetica;"><img src="http://images.m9.mailplus.nl/user3900328/131/welcome0.png" border="0" width="425" height="425" mpdatacustomsize="true" ><br>
</span></p>
</td>
</tr>
<tr>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #43565e; line-height: 18px; background-color: #e7f0f7;"> </td>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #43565e; line-height: 18px; background-color: #e7f0f7;"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Social Superstore - Email template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
/* RESET STYLES */
body{margin:0; padding:0;}
img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
table{border-collapse:collapse !important;}
body{height:100% !important; margin:0; padding:0; width:100% !important;}
#media screen and (max-width: 525px) {
table {
width: 100%;
}
.header-padding {
padding-left: 10px;
padding-right: 10px;
}
.logo {
height: 50px;
width: auto;
}
.mobile-hide {
display: none !important;
}
.mobile-copy {
text-align: center !important;
}
.mobile-center-btn {
text-align: center !important;
}
.icon-image-tall {
width: auto !important;
height: 200px;
}
.icon-image-long {
width: 200px;
height: auto !important;
}
.icons_three_padding {
padding-bottom: 40px;
}
.iphone_icon_mobile {
width: 120px !important;
}
.money_icon_mobile {
width: 120px !important;
}
.share_icon_mobile {
width: 120px !important;
}
.icons_conatiners_height {
height: auto !important;
}
.main-image-mobile {
width: 90% !important;
}
}
</style>
</head>
<body>
<!-- hidden preheader text -->
<div style="display: none; font-size: 1px; color: #f2f2f2; line-height: 1px; font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;">
Hi #FIRSTNAME#, You are officially a #[COMPANY]. It's time to become a social butterfly. You should be proud of your new store because it truly is super… now let's find all your friends so that they can become Social Superstars too.
</div>
<!-- /hidden preheader text -->
<!--container-->
<table cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="#f2f2f2" style="background-color: #f2f2f2;">
<tr>
<td>
<!--header container-->
<table cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="#ffffff" style="background-color: #ffffff; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #dadada;">
<tr>
<td style="padding-top: 10px; padding-bottom: 10px;" class="header-padding">
<!--header-->
<center>
<table cellspacing="0" cellpadding="0" border="0" width="600" bgcolor="#ffffff" style="background-color: #ffffff; margin-left: auto; margin-right: auto;">
<tr>
<td>
<img src="http://placehold.it/64x64" alt="" style="font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; color: #E72C7B; font-size: 24px;" width="64" class="logo">
</td>
</table>
</center>
<!--/header-->
</td>
</tr>
</table>
<!--/header container-->
<!--hero container-->
<table cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="#ffffff" style="background-color: #ffffff;">
<tr>
<td style="padding-top: 40px; padding-bottom: 40px; padding-left: 10px; padding-right: 10px;">
<!--hero copy-->
<center>
<table cellspacing="0" cellpadding="0" border="0" width="600" style="margin-left: auto; margin-right: auto; text-align: center;">
<tr>
<td style="font-size: 36px; font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; font-weight: bold; padding-bottom: 20px; color: #6a6a6a;" class="mobile-copy">
Hi #FIRSTNAME#,
</td>
</tr>
<tr>
<td style="font-size: 18px; font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; line-height: 175%; color: #6a6a6a;" class="mobile-copy">
You are officially a <span style="font-weight: bold">#[COMPANY]</span>. It's time to become a social butterfly. You should be proud of your new store because it truly is super… now let's find all your friends so that they can become Superstars too.
</td>
</tr>
</table>
</center>
<!--/hero copy-->
</td>
</tr>
</table>
<!--/hero container-->
<!--fill it up and launch container-->
<table cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="#6a6a6a" style="background-color: #6a6a6a;">
<tr>
<td style="padding-top: 40px; padding-bottom: 40px; padding-left: 10px; padding-right: 10px;">
<!--fill it up and launch-->
<center>
<table cellspacing="0" cellpadding="0" border="0" width="600" style="margin-left: auto; margin-right: auto; text-align: center;" align="center">
<tr>
<td style="font-size: 48px; font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; font-weight: bold; padding-bottom: 20px; color: #ffffff; text-align: center;" class="mobile-copy">More followers,<br>more money</td>
</tr>
<tr>
<td style="padding-bottom: 40px;"><img src="https://s3-eu-west-1.amazonaws.com/socialsuperstore-assets/emails/find-followers.png" alt="" style="width: 360px;" width="360" class="main-image-mobile">
</td>
</tr>
<tr>
<td style="font-size: 18px; font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; line-height: 175%; padding-bottom: 40px; color: #ffffff; text-align: center;" class="mobile-copy">Don't be shy… share share share! <br>Remember... Stay Social. Stay Super. </td>
</tr>
<tr>
<td class="mobile-center-btn">Share now →</td>
</td>
</tr>
</table>
</center>
<!--/fill it up and launch-->
</td>
</tr>
</table>
<!--/fill it up and launch container-->
<!--footer container-->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding-top: 40px; padding-bottom: 40px; padding-left: 10px; padding-right: 10px;">
<!--footer-->
<center>
<table width="600" cellpadding="0" cellspacing="0" align="center" style="text-align: center;">
<tr>
<td style="font-size: 18px; line-height: 175%; font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; color: #999999; padding-bottom: 20px">Thanks,<br />
The [COMPANY]team
</td>
</tr>
<tr>
<td style="font-size: 24px; font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; color: #282828; font-weight: bold;">COPY GOES HERE</td>
</tr>
<tr>
<td style="padding-top: 20px;">
<img src="http://placehold.it/42x42png" alt="" height="42" width="42" border="0">
<img src="http://placehold.it/42x42png" alt="" height="42" width="42" border="0">
<img src="http://placehold.it/42x42png" alt="" height="42" width="42" border="0">
<img src="http://placehold.it/42x42png" alt="" height="42" width="42" border="0">
<img src="http://placehold.it/42x42png" alt="" height="42" width="42" border="0">
</td>
</tr>
</table>
</center>
<!--/footer-->
</td>
</tr>
</table>
<!--/footer container-->
<!-- Unsubscribe container -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td bgcolor="#282828" align="center" style="padding: 20px 0px; background-color: #282828;">
<!-- unsubscribe -->
<center>
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" class="responsive-table">
<tr>
<td align="center" style="font-size: 10px; line-height: 175%; font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; color:#ffffff;">
<span class="appleFooter" style="color:#999;">
[company]
</span>
<br><a class="original-only" style="color: #E72C7B; text-decoration: none;" href="http://$UNSUB$">Unsubscribe</a>
</td>
</tr>
</table>
</center>
<!--/unsubscribe-->
</td>
</tr>
</table>
<!--/Unsubscribe container-->
</td>
</tr>
</table>
<!--/container-->
</body>
</html>
I've created some responsive HTML emails and have noticed on a couple of them, they show a white space (approx 20-30px in width) on the right. it only appears on iPads? I've attached a screenshot. Any ideas on how to get rid of it? I've apply 100% widths and 0 padding/margin and overflow-x: hidden to body and html tags but didn't work. Is it something to do with the amount of content in the email? The other emails without this issue have a lot more content (ie. they are taller with more sections).
http://imgur.com/kBgYmLm
This one was a tough nut to crack. To fix it, I wrote a media query that targets only iPads, and specifies a minimum width for the body. In my testing, this fixes the issue.
https://www.emailonacid.com/app/acidtest/display/summary/H51ptRsq1CKfk3qClFhulAJfOoa7NeZ5uplotor0fc9kD/shared
#media screen and (device-width: 768px) and (device-height: 1024px) {
body {min-width: 701px}
}