I'm new to HTML emails and there is an issue I'm struggling with for a couple of days.
I have a two column layout with an image on the left side and some text and a button on the right side.
The issue seems to be the combination of vertical alignment of the column and the alignment of the button itself. The column's alignment can be top, middle, or bottom and the button's alignment can be left, center, or right. If the column's alignment is valign="middle" and the button's alignment is align="left" or align="right", the button overlaps the text. It seems the the issue is on Outlook for Windows as it looks fine on Outlook for Mac.
Here's how it looks on Outlook for Windows-
Here's how it is on Outlook for Mac (this is what I expect on Windows)
Here's the entire email code-
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="x-apple-disable-message-reformatting" />
<meta name="viewport" content=" width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>sdf</title>
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG /> <o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<style type="text/css" data-premailer="ignore">
#media screen and (max-width: 600px) {
#-ms-viewport {
width: 320px;
}
}
</style>
<style type="text/css" data-premailer="ignore">
.ExternalClass,
.FullW,
.ReadMsgBody {
width: 100% !important;
}
form td,
form th,
table th {
padding: 0;
}
html,
table th {
margin: 0 !important;
}
html {
padding: 0 !important;
}
button {
display: block !important;
}
div {
display: block;
}
.ExternalClass * {
line-height: 100%;
}
.ExternalClass,
.ExternalClass div,
.ExternalClass font,
.ExternalClass p,
.ExternalClass span,
.ExternalClass td,
.ExternalClass th,
img {
line-height: 100% !important;
}
.ReadMsgBody .ExternalClass a:link,
.ii a,
.yshortcuts {
text-decoration: none !important;
color: transparent !important;
}
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
table,
td,
th {
mso-table-lspace: 0;
mso-table-rspace: 0;
border-collapse: collapse;
}
a,
blockquote,
body,
li,
p,
span,
table,
td,
th {
-ms-text-size-adjust: 100% !important;
-webkit-text-size-adjust: 100% !important;
}
table th {
vertical-align: top;
font-weight: 400;
}
a img,
img {
border: none !important;
outline: 0 !important;
text-decoration: none !important;
}
img {
-ms-interpolation-mode: bicubic !important;
}
.imgfix {
line-height: 0 !important;
font-size: 0 !important;
}
.imgfix div img,
.imgfix img {
margin: 0 !important;
padding: 0;
}
a {
color: #000;
text-decoration: none;
}
html {
overflow-x: hidden;
}
</style>
<!--[if gte mso 9]>
<style type="text/css" data-premailer="ignore">
.imgfix img {
mso-line-height-rule: exactly;
font-size: 1px;
line-height: 100%;
}
.text .padding,
.button-link td,
.list-item span,
.menu-item span,
.icon-menu-item span {
line-height: 120%;
}
[style*="Lato"],
[style*="Merriweather Sans"],
[style*="Open Sans"],
[style*="Roboto"],
[style*="Source Sans Pro"],
[style*="DM Sans"] {
font-family: Verdana, Geneva, sans-serif !important;
}
[style*="Arvo"],
[style*="Lora"],
[style*="Merriweather"],
[style*="Noticia Text"],
[style*="Playfair Display"] {
font-family: "Times New Roman", Times, serif !important;
}
</style>
<![endif]-->
<style type="text/css" data-premailer="ignore">
::-webkit-scrollbar {
width: 8px;
background-color: rgba(0, 0, 0, 0);
-webkit-border-radius: 100px;
}
::-webkit-scrollbar:hover {
background-color: rgba(0, 0, 0, 0.09);
}
::-webkit-scrollbar-thumb:vertical {
background: rgba(0, 0, 0, 0.5);
-webkit-border-radius: 100px;
}
</style>
<style type="text/css">
#media only screen and (max-width: 600px) {
.m-show-row {
max-height: initial !important;
max-width: 100% !important;
opacity: initial !important;
mso-hide: none !important;
display: table !important;
}
.m-show-row table {
max-height: initial !important;
max-width: 100% !important;
opacity: initial !important;
mso-hide: none !important;
display: table !important;
}
.m-show-row tr {
max-height: initial !important;
max-width: 100% !important;
opacity: initial !important;
mso-hide: none !important;
display: table !important;
}
.m-show-row th {
max-height: initial !important;
max-width: 100% !important;
opacity: initial !important;
mso-hide: none !important;
display: table-cell !important;
}
.m-show-row td {
max-height: initial !important;
max-width: 100% !important;
opacity: initial !important;
mso-hide: none !important;
display: table-cell !important;
}
.m-show-row div {
max-height: initial !important;
max-width: 100% !important;
opacity: initial !important;
mso-hide: none !important;
}
.m-show-row span {
max-height: initial !important;
max-width: 100% !important;
opacity: initial !important;
mso-hide: none !important;
}
.m-show-row img {
max-height: initial !important;
max-width: 100% !important;
opacity: initial !important;
mso-hide: none !important;
}
.m-show-row a {
max-height: initial !important;
max-width: 100% !important;
opacity: initial !important;
mso-hide: none !important;
display: block !important;
}
.m-show-row.regular .column {
display: block !important;
}
.m-show-row .text div {
display: block !important;
}
.m-show-row .text span,
.m-show-row .text a {
display: initial !important;
}
.m-show-row .menu .menu-item.m-hide {
display: none !important;
}
.m-show-row .menu .menu-item.m-show {
display: block !important;
}
.m-show-row .icon-menu .icon-menu-item.m-block,
.m-show-row .icon-menu tr.m-block {
display: block !important;
}
.m-show-row .icon-menu .m-hide {
display: none !important;
}
.menu .menu-items {
display: block !important;
}
.menu .menu-item.m-show {
max-height: initial !important;
max-width: 100% !important;
opacity: initial !important;
mso-hide: none !important;
padding: 10px 0 !important;
}
.menu .menu-item.m-show span,
.menu .menu-item.m-show a,
.menu .menu-item.m-show div {
max-height: initial !important;
max-width: 100% !important;
opacity: initial !important;
mso-hide: none !important;
display: block !important;
}
.icon-menu-item.icon-text span {
display: inline-block !important;
}
.icon-menu img {
max-width: 100% !important;
}
.icon-menu tr.m-show {
max-height: initial !important;
max-width: 100% !important;
opacity: initial !important;
mso-hide: none !important;
}
.icon-menu tr.m-show .icon-menu-item * {
display: block !important;
max-height: initial !important;
max-width: 100% !important;
opacity: initial !important;
mso-hide: none !important;
}
.icon-menu tr.m-show .icon-menu-item,
.icon-menu tr.m-show .icon-menu-item td {
display: inline-block !important;
max-height: initial !important;
max-width: 100% !important;
opacity: initial !important;
mso-hide: none !important;
}
.list {
width: 100% !important;
}
.list table {
width: 100% !important;
}
.list .m-list-item {
display: block !important;
max-height: unset !important;
max-height: initial !important;
max-width: 100% !important;
opacity: initial !important;
mso-hide: none !important;
}
.list .m-list-item span,
.list .m-list-item a,
.list .m-list-item div {
display: table-cell !important;
max-height: initial !important;
max-width: 100% !important;
opacity: initial !important;
mso-hide: none !important;
}
.list .m-list-item .decorator {
padding-right: 3px !important;
}
.m-block,
.m-show {
display: block !important;
}
.m-inline-block {
display: inline-block !important;
}
.m-vertical-spacing {
padding-bottom: 10px !important;
}
.m-table {
display: table !important;
}
.m-inline {
display: inline !important;
}
.m-full-width {
width: 100% !important;
}
.m-half-width {
width: 50% !important;
}
.m-align-center {
text-align: center !important;
}
.body-padding {
padding: 0 !important;
}
.body-text {
max-height: unset !important;
}
tr {
width: 100% !important;
display: table !important;
}
.row {
height: auto !important;
}
table.menu td,
table.menu th {
width: 100% !important;
}
.button-link a {
border-radius: 5px !important;
display: block !important;
padding: 10px 20px !important;
box-sizing: border-box !important;
}
.image img {
max-width: 100% !important;
}
.menu .menu-spacing,
.list .list-type,
.list .list-item,
.m-hide {
display: none !important;
}
}
</style>
</head>
<body
bgcolor="#f2f2f2"
style="
height: 100%;
width: 100%;
margin: 0;
padding: 0;
line-height: 1;
background-color: #f2f2f2;
"
>
<div
align="center"
class="preheader"
style="
font-family: Arial, Helvetica, sans-serif;
color: #303030;
display: none;
font-size: 1px;
line-height: 1px;
max-height: 0;
max-width: 0;
opacity: 0;
overflow: hidden;
mso-hide: all;
"
>
sdf
</div>
<table
class="container m-full-width"
width="100%"
bgcolor="#f2f2f2"
border="0"
cellpadding="0"
cellspacing="0"
title=""
style="
border-spacing: 0;
text-align: center;
height: 100%;
width: 100%;
background-color: #f2f2f2;
"
>
<tbody>
<tr>
<td
class="body-padding"
align="center"
style="text-align: left; font-weight: 400; padding: 20px 0"
>
<table
class="center border m-full-width"
align="center"
border="0"
cellpadding="0"
cellspacing="0"
bgcolor="#ffffff"
style="
border-spacing: 0;
border-collapse: separate;
width: 600px;
background-color: #fff;
border-radius: 0;
"
width="600"
>
<tbody>
<tr>
<td style="text-align: left; font-weight: 400">
<table
class="row regular m-full-width"
border="0"
cellspacing="0"
cellpadding="0"
style="
border-spacing: 0;
text-align: center;
width: 100%;
border: 0;
"
>
<tbody>
<tr>
<td style="text-align: left; font-weight: 400">
<table
class="row table"
border="0"
cellpadding="0"
cellspacing="0"
style="
border-spacing: 0;
text-align: center;
width: 100%;
border: 0;
"
>
<tbody>
<tr class="table" style="width: 100%">
<th
class="column m-full-width m-table m-table"
bgcolor=""
valign="middle"
style="
font-weight: 400;
border-collapse: separate;
text-align: center;
width: 348px;
vertical-align: middle;
"
width="348"
>
<table
class="image"
border="0"
cellspacing="0"
cellpadding="0"
style="border-spacing: 0; width: 100%"
>
<tbody>
<tr>
<td
class="padding"
align="center"
style="
font-weight: 400;
padding: 0;
text-align: center;
"
>
<a
class="imgfix"
target="_blank"
style="
display: block;
text-decoration: none;
"
><img
class="m-inline m-full-width"
border="0"
src="https://images-stage.apsis.cloud/804df07c-3e81-4f8a-8518-182572b51512.jpeg"
alt=""
title=""
width="348"
style="width: 348px"
/></a>
</td>
</tr>
</tbody>
</table>
</th>
<th
class="column m-full-width m-table m-table"
bgcolor=""
valign="middle"
style="
font-weight: 400;
border-collapse: separate;
text-align: center;
width: 252px;
vertical-align: middle;
"
width="252"
>
<table
class="text"
border="0"
cellspacing="0"
cellpadding="0"
style="border-spacing: 0; width: 100%"
>
<tbody>
<tr>
<td
class="padding"
style="
text-align: left;
font-weight: 400;
mso-line-height-rule: exactly;
word-break: break-word;
word-wrap: break-word;
overflow-wrap: break-word;
padding: 20px 20px 20px 20px;
font: 14px/1.4 Arial, Helvetica,
sans-serif;
"
>
A das observantia non est recedendu
vitae dictum. Gallia atilitatis,
obscuris et malesuada fames.
</td>
</tr>
</tbody>
</table>
<table
class="button auto btn-radius"
border="0"
cellpadding="0"
cellspacing="0"
align="left"
style="
border-spacing: 0;
border-collapse: separate;
border-radius: 0;
"
>
<tbody>
<tr style="border-collapse: inherit">
<td
class="padding"
style="
font-weight: 400;
text-align: center;
border-radius: 0;
padding: 0 20px 0 20px;
"
>
<table
class="button-link"
align="left"
border="0"
cellpadding="0"
cellspacing="0"
style="
border-spacing: 0;
border-collapse: separate;
color: #fff;
border-radius: 0;
background: #4a4a4a;
font: bold 14px/1.4 Arial,
Helvetica, sans-serif;
"
>
<tbody>
<tr
style="
border-collapse: inherit;
"
>
<td
style="
font-weight: 400;
text-align: center;
line-height: 1.4;
word-break: break-word;
word-wrap: break-word;
overflow-wrap: break-word;
padding: 10px 10px 10px
10px;
font: bold 14px/1.4 Arial,
Helvetica, sans-serif;
"
>
<!--[if gte mso 9]><a target="_blank" style="color:#ffffff"><span style="font:bold 14px/1.4 Arial, Helvetica, sans-serif;"><[endif]-->button<!--[if gte mso 9]></span></a><[endif]-->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
I also created a Codepen here.
I'm thinking it may have something to do with the button's align property as it is the same as float:left or float:right which removes the button from normal document flow.
Any help is appreciated.
Anyhow, here's basically all the HTML you'd need for this, taking into account limitations of the different e-mail clients as well (thus only using accepted CSS).
<style>
body{
background-color:#f2f2f2;
}
.tableCenter{
border-collapse:collapse;
margin:auto;
max-width:600px;
background-color:white;
font-family: 'Arial', 'Helvetica', sans-serif;
font-weight:400;
line-height:20px;
font-size:15px;
}
.tableCenter button{
color:white;
padding:10px;
border:none;
font-weight:bold;
background:rgb(128, 128, 128);
}
</style>
<table class='tableCenter'>
<tr>
<td style='width:55%'>
<img src='https://images-stage.apsis.cloud/804df07c-3e81-4f8a-8518-182572b51512.jpeg' width='100%'>
</td>
<td style='width:40%; padding:20px'>
<p>
A das observantia non est recedendu vitae dictum. Gallia atilitatis, obscuris et malesuada fames.
</p>
<button>Button</button>
</td>
</tr>
</table>
Related
I am developing an HTML email and I am getting a weird issue; when viewing the email in chrome with responsive mode on there is a faint border on some of the cells. I am not sure what is causing it, none of the cells have any border and it only shows when the screen size you have set in chrome is such that the email is full width. I have tested the email using email on acid testing previews and the issue is showing on iPhone tests. Anyone know what's causing this and how to fix it?
The issue does not show in code pen, I am just using it to share the html:
https://codepen.io/jmona789/pen/ZELjrOv
Relevent portion of html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml: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 http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta content="telephone=no" name="format-detection">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="x-apple-disable-message-reformatting">
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<!--[if !mso]><!-- -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<title>Test</title>
<style type="text/css">
/* Some resets and issue fixes */
#outlook a {
padding: 0;
}
body {
width: 100% !important;
-webkit-text;
size-adjust: 100%;
-ms-text-size-adjust: 100%;
margin: 0;
padding: 0;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
.backgroundTable {
margin: 0 auto;
padding: 0;
width: 100%;
!important;
}
table td {
border-collapse: collapse;
}
.ExternalClass * {
line-height: 115%;
}
/* End reset */
#import url(https://imcsecuresftp.s3.amazonaws.com/fonts/Arboria-Bold_1.otf);
/*Calling our web font*/
/*==============REGULAR NOTATION===================*/
#media only screen and (max-width:480px) {
.full-column {
float: none !important;
width: 100% !important;
height: auto !important;
display: table !important;
}
.center-on-mobile {
text-align: center !important;
}
.column-td {
padding: 0px 24px !important;
}
.column-td-right-only {
padding: 0px 24px 0px 0px !important;
}
.column-td-left-only {
padding: 0px 0px 0px 24px !important;
}
.mobile-line-br {
line-height: 30px !important;
}
.hide {
display: none !important;
}
.show {
display: block !important;
}
table.full-width-table {
height: px;
}
img.full-width {
width: 100% !important;
height: auto !important;
}
}
/* Colors
* #6caae3 = Dark Blue
* #6caae3 = Light Blue
* #f3f3f3 = Light Grey - Background
* #333333 = Dark Grey - Body Copy
* #555759 = Sub Header Grey
* #ee3134 = Red
--------------------------------------------- */
#font-face {
src: url("http://imc-secure.com/immunoCAP/Fonts/HelveticaNeueLTStd-MdCn.otf") format("truetype");
font-family: "HelveticaNeueLTStd-MdCn";
font-style: normal;
font-weight: normal;
}
#font-face {
src: url("https://s3.amazonaws.com/imcsecuresftp/fonts/HelveticaNeueLTStd-Md.otf") format("truetype");
font-family: "HelveticaNeueLTStd-Md";
font-style: normal;
font-weight: normal;
}
#font-face {
src: url("https://s3.amazonaws.com/imcsecuresftp/fonts/HelveticaNeueLTStd-Bd.otf") format("truetype");
font-family: "HelveticaNeueLTStd-Bd";
font-style: normal;
font-weight: normal;
}
#font-face {
src: url("https://s3.amazonaws.com/imcsecuresftp/fonts/HelveticaNeueLTStd-Hv.otf") format("truetype");
font-family: "HelveticaNeueLTStd-Hv";
font-style: normal;
font-weight: normal;
}
#font-face {
src: url("https://s3.amazonaws.com/imcsecuresftp/fonts/HelveticaNeueLTStd-Lt.otf") format("truetype");
font-family: "HelveticaNeueLTStd-Lt";
font-style: normal;
font-weight: normal;
}
#font-face {
src: url("https://s3.amazonaws.com/imcsecuresftp/fonts/HelveticaNeueLTStd-LtIt.otf") format("truetype");
font-family: "HelveticaNeueLTStd-LtIt";
font-style: normal;
font-weight: normal;
}
#font-face {
src: url("https://s3.amazonaws.com/imcsecuresftp/fonts/HelveticaNeueLTStd-It.otf") format("truetype");
font-family: "HelveticaNeueLTStd-It";
font-weight: normal;
}
#font-face {
src: url("https://s3.amazonaws.com/imcsecuresftp/fonts/HelveticaNeueLTStd-Roman.otf") format("truetype");
font-family: "HelveticaNeueLTStd-Roman";
font-weight: normal;
}
#font-face {
src: url("https://imcsecuresftp.s3.amazonaws.com/fonts/Arboria-Bold_1.otf") format("truetype");
font-family: "Arboria-Bold";
font-style: normal;
font-weight: normal;
}
[style*="Arboria-Bold"] {
font-family: 'Arboria-Bold', Helvetica-Bold, "Arial Black", Helvetica, Arial, sans-serif !important;
}
[style*="HelveticaNeueLTStd-Hv"] {
font-family: 'HelveticaNeueLTStd-Hv', Helvetica, Arial, sans-serif !important;
}
[style*="HelveticaNeueLTStd-Md"] {
font-family: 'HelveticaNeueLTStd-Md', Helvetica, Arial, sans-serif !important;
}
[style*="HelveticaNeueLTStd-Bd"] {
font-family: 'HelveticaNeueLTStd-Bd', Helvetica, Arial, sans-serif !important;
font-weight: normal;
}
[style*="HelveticaNeueLTStd-Roman"] {
font-family: 'HelveticaNeueLTStd-Roman', Helvetica, Arial, sans-serif !important;
}
[style*="HelveticaNeueLTStd-Lt"] {
font-family: 'HelveticaNeueLTStd-Lt', Helvetica, Arial, sans-serif !important;
}
[style*="HelveticaNeueLTStd-LtIt"] {
//font-family: 'HelveticaNeueLTStd-LtIt', Helvetica, Arial, sans-serif !important;
font-style: italic;
}
[style*="HelveticaNeueLTStd-It"] {
//font-family: 'HelveticaNeueLTStd-It', Helvetica, Arial, sans-serif !important;
font-style: italic;
}
/* Client-specific Styles */
table {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
#outlook a {
padding: 0;
}
/* Force Outlook to provide a "view in browser" menu link. */
body {
width: 100% !important;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
margin: 0;
padding: 0;
}
/* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */
.ExternalClass {
width: 100%;
}
/* Force Hotmail to display emails at full width */
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
/* Force Hotmail to display normal line spacing.*/
#backgroundTable {
margin: 0;
padding: 0;
width: 100% !important;
line-height: 100% !important;
}
img {
outline: none;
text-decoration: none;
border: none;
-ms-interpolation-mode: bicubic;
}
a img {
border: none;
}
.image_fix {
display: block;
}
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;
}
table td {
border-collapse: collapse;
}
table {
border-collapse: collapse;
border-spacing: 0;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
/*STYLES*/
table.full {
width: 100%;
clear: both;
}
.appleLinks a {
color: #ffffff;
text-decoration: none;
}
.appleLinksGray a {
color: #a7a9ac;
text-decoration: none;
}
/*IPHONE STYLES*/
#media only screen and (max-width:480px) {
table#DesktopOnly {
width: 0px !important;
display: none !important;
height: 0px !important;
mso-hide: all !important;
max-height: 0 !important;
overflow: hidden !important;
}
table#FooterDesktopOnly {
width: 0px !important;
display: none !important;
height: 0px !important;
width: 0px !important;
display: none !important;
height: 0px !important;
mso-hide: all !important;
max-height: 0 !important;
overflow: hidden !important;
}
#image1 {
width: 390px;
height: 314px;
}
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;
}
a[href^="tel"],
a[href^="sms"] {
text-decoration: none;
color: #0a8cce;
/* or whatever your want */
pointer-events: none;
cursor: default;
}
table.devicewidth {
width: 390px !important;
text-align: center !important;
}
/*tr.devicewidth {width: 390px!important;text-align:center!important;}*/
/*td.devicewidth {width: 390px!important;text-align:center!important;}*/
table.devicewidthinner {
width: 360px !important;
text-align: center !important;
}
table#footer {
width: 360px !important;
}
table#HeaderTable {
width: 360px !important;
}
img.colimg2 {
width: 280px !important;
height: 140px !important;
}
td#FooterTD {
width: 255px !important;
}
br#MobileOnlyBR {
display: block !important;
}
table#DesktopOnly {
width: 0px !important;
display: none !important;
height: 0px !important;
}
tr#DesktopOnly {
max-height: 0px !important;
height: 0px !important;
display: none !important;
line-height: 0px !important;
padding: 0px !important;
margin: 0px !important;
width: 0px !important;
}
td#DesktopOnly {
max-height: 0px !important;
height: 0px !important;
display: none !important;
line-height: 0px !important;
padding: 0px !important;
margin: 0px !important;
width: 0px !important;
}
tr#MobileOnlyTR {
overflow: visible !important;
display: table-row !important;
line-height: 100% !important;
mso-hide: none !important;
max-height: none !important;
}
td#MobileOnlyTD {
overflow: visible !important;
display: table-cell !important;
line-height: 100% !important;
mso-hide: none !important;
max-height: none !important;
}
div#MobileOnlyDiv {
overflow: visible !important;
display: block !important;
line-height: 100% !important;
mso-hide: none !important;
max-height: none !important;
}
table#MobileOnly {
width: 390px !important;
min-width: 390px !important;
overflow: visible !important;
float: none !important;
display: table !important;
line-height: 100% !important;
max-height: none !important;
position: relative !important;
margin-left: auto !important;
margin-right: auto !important;
}
table#MobileOnlyInnerTable {
overflow: visible !important;
float: none !important;
display: table !important;
line-height: 100% !important;
max-height: none !important;
position: relative !important;
/*margin-left: auto!important;
margin-right: auto!important;*/
}
table#MobileOnlyTable {
width: 100% !important;
overflow: visible !important;
float: left !important;
display: table-cell !important;
line-height: 100% !important;
max-height: none !important;
position: relative !important;
margin-left: auto !important;
margin-right: auto !important;
float: left !important;
display: table !important;
}
/* --------------- Responsive Footer Code Start --------------------------------- */
table#HeaderTable {
width: 360px !important;
}
td.MobileHeight20 {
height: 20px !important;
}
td#FooterMobileText {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px !important;
line-height: 14px !important;
text-align: left !important;
color: #888888 !important;
padding-bottom: 20px !important;
}
table#FooterDesktopOnly {
width: 0px !important;
display: none !important;
height: 0px !important;
}
table#MobileOnlyFooter {
width: 390px !important;
min-width: 390px !important;
overflow: visible !important;
float: none !important;
display: block !important;
line-height: 100% !important;
max-height: none !important;
position: relative !important;
margin-left: auto !important;
margin-right: auto !important;
}
table#MobileOnlyFooter2 {
width: 390px !important;
min-width: 390px !important;
overflow: visible !important;
float: none !important;
display: block !important;
line-height: 100% !important;
max-height: none !important;
position: relative !important;
margin-left: auto !important;
margin-right: auto !important;
}
div#FooterSocialImages {
width: 100% !important;
min-width: 390px !important;
overflow: visible !important;
float: none !important;
display: block !important;
line-height: 100% !important;
max-height: none !important;
height: 100% !important;
min-height: 100% !important;
text-align: center !important;
}
div#FooterSocialImages2 {
width: 100% !important;
min-width: 390px !important;
overflow: visible !important;
float: none !important;
display: block !important;
line-height: 100% !important;
max-height: none !important;
height: 100% !important;
min-height: 100% !important;
text-align: center !important;
}
table#FooterSocialImagesTable {
width: 100% !important;
min-width: 390px !important;
overflow: visible !important;
float: none !important;
display: block !important;
line-height: 100% !important;
max-height: none !important;
height: 100% !important;
min-height: 100% !important;
text-align: center !important;
}
img#FooterLogoMobile {
width: 180px !important;
position: relative !important;
margin-top: 13px !important;
margin-left: 105px !important;
margin-bottom: 13px !important;
margin-right: 105px !important;
}
/* --------------- Responsive Footer Code End --------------------------------- */
}
table.em_show,
tr.em_show,
td.em_show,
br.em_show,
span.em_show {
display: none;
overflow: hidden;
line-height: 0px;
mso-hide: all;
max-height: 0px;
mso-line-height-rule: exactly;
}
#media only screen and (max-width:480px) {
td.em_show_nonText {
overflow: visible !important;
display: table-cell !important;
mso-hide: none !important;
max-height: none !important;
mso-line-height-rule: exactly;
}
table.em_show,
tr.em_show,
td.em_show,
br.em_show {
overflow: visible !important;
display: table-cell !important;
line-height: 100% !important;
mso-hide: none !important;
max-height: none !important;
mso-line-height-rule: exactly;
}
span.em_show {
overflow: visible !important;
display: inline !important;
line-height: 100% !important;
mso-hide: none !important;
max-height: none !important;
mso-line-height-rule: exactly;
}
td.em_align_center {
text-align: center !important;
}
td.em_align_right {
text-align: center !important;
}
table.em_hide,
tr.em_hide,
td.em_hide,
br.em_hide,
span.em_hide {
display: none !important;
overflow: hidden;
line-height: 0px;
mso-hide: all;
max-height: 0px;
font-size: 0px;
mso-line-height-rule: exactly;
}
}
/*==============END REGULAR NOTATION===================*/
/*prevent superscripts from pushing line above them*/
sup {
line-height: 0;
/*vertical-align: baseline;*/
/*position: relative;*/
/*top: -0.4em;*/
}
sub {
line-height: 0;
}
/* #media only screen and (min-width:480px) and (max-width:650px) {
table[class=em_wrapper] {
width: 100% !important;
}
}*/
#media only screen and (max-width:480px) {
table[class=em_wrapper] {
width: 100% !important;
}
}
#media only screen and (max-width:480px) {
table.em_wrapper {
width: 100% !important;
}
}
#media only screen and (min-width:1px) {
/*gmail doesnt support media queries so this table will only show on gmail*/
.gmail-app-fix,
table.gmail-app-fix {
display: none !important;
overflow: hidden;
line-height: 0px;
mso-hide: all;
max-height: 0px;
font-size: 0px;
}
}
</style>
</head>
<body style="margin:0;">
<div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;margin-right:100%;">
Explore allergy diagnostic resources
</div>
<span style="display:none !important;visibility:hidden;mso-hide:all;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">
<!--EOA COMMENT: This snippet of white space has been added to ensure short preview text does not run into the following text of your email.-->
</span>
<div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;margin-right:100%;">
</div>
<center>
<table style="width:600px; margin:auto;" cellpadding="0" cellspacing="0" border="0" class="devicewidth" width="600" role="presentation">
<tr>
<td>
<table style="width:600px; margin:auto;" cellpadding="0" cellspacing="0" border="0" class="devicewidth" width="600" role="presentation">
<tr>
<!--[if mso]>
<td width="3%" class="em_hide" style="width:3%;background-color:#098fa1;mso-line-height-rule: exactly;margin:0;padding:0;"> </td>
<![endif]-->
<!--[if !mso]><!-->
<td width="50" class="em_hide" style="width:50px;background-color:#098fa1;mso-line-height-rule: exactly;margin:0;padding:0;"> </td>
<!--<![endif]-->
<td width="25" class="em_show" style="display: none;overflow:hidden;line-height:0px;mso-hide:all;max-height:0px;mso-line-height-rule: exactly;width:25px;background-color:#098fa1;"> </td>
<td>
<table cellspacing="0" cellpadding="0" border="0" style="width:100%;" role="presentation">
<tr>
<td style="padding-bottom:0px;background-color:#098fa1;" bgcolor="#098fa1">
<table cellspacing="0" cellpadding="0" border="0" style="width:100%;background-color:#098fa1" role="presentation">
<tr>
<td>
<table class="full-column" style="float:left; display:table-cell; width:100%;background-color:#098fa1" cellspacing="0" cellpadding="0" border="0" align="center" role="presentation">
<tbody>
<tr>
<td height="45" style="border-collapse:collapse; font-size:45px; line-height:45px;"> </td>
</tr>
<tr style="background-color:#098fa1">
<td width="498" class="column-td " style="padding-left:0; padding-right:0; padding-top:0; padding-bottom:0px; width:498px;
font-family: Helvetica, HelveticaArial, sans-serif, HelveticaNeueLTStd-Bd;font-size:20px; color:#ffffff; line-height: 30px; mso-line-height: exactly; vertical-align: middle; text-align: left;background-color:#098fa1" valign="top">
<div style="background-color:#098fa1">
<b style="font-family:Helvetica, HelveticaArial, sans-serif, HelveticaNeueLTStd-Bd;">
COPY COPY COPY COPY COPY COPY COPY COPY
</b>
</div>
</td>
</tr>
<tr>
<td height="21" style="border-collapse:collapse; font-size:21px; line-height:21px;"> </td>
</tr>
<tr style="background-color:#098fa1">
<td width="498" class="column-td " style="padding-left:0; padding-right:0; padding-top:0; padding-bottom:0px; width:498px;
font-family: Helvetica, HelveticaArial, sans-serif, HelveticaNeueLTStd-Roman;font-size:16px; color:#ffffff; line-height: 22px; mso-line-height: exactly; vertical-align: middle; text-align: left;background-color:#098fa1" valign="top">
<div style="background-color:#098fa1">
COPY COPY COPY COPY COPY COPY COPY COPY COPY COPY COPY COPY COPY COPY COPY COPY COPY COPY COPY COPY COPY COPY COPY COPY COPY COPY COPY COPY COPY COPY COPY COPY COPY COPY COPY COPY
</div>
</td>
</tr>
<tr>
<td height="31" style="border-collapse:collapse; font-size:31px; line-height:31px;"> </td>
</tr>
<tr style="background-color:#098fa1">
<td width="498" class="column-td " style="padding-left:0; padding-right:0; padding-top:0; padding-bottom:0px; width:498px;
font-family: Helvetica, HelveticaArial, sans-serif, HelveticaNeueLTStd-Bd;font-size:18px; color:#ffffff; line-height: 24px; mso-line-height: exactly; vertical-align: middle; text-align: left;background-color:#098fa1" valign="top">
<div style="background-color:#098fa1">
<b style="font-family:Helvetica, HelveticaArial, sans-serif, HelveticaNeueLTStd-Bd;">
COPY COPY COPY COPY COPY COPY COPY COPY
</b>
</div>
</td>
</tr>
<tr>
<td height="15" style="border-collapse:collapse; font-size:15px; line-height:15px;"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding-bottom:0px;background-color:#098fa1;" bgcolor="#098fa1">
<table width="100%" border="0" cellspacing="0" cellpadding="0" role="presentation">
<tr>
<td class="column-td">
<table width="100%" border="0" cellspacing="0" cellpadding="0" role="presentation">
<tr>
<!--[if !mso]><!-->
<td id="MobileOnlyTD" align="left" style="max-height: 0px;height: 0px; display: none; line-height: 0px; padding: 0px; margin: 0px; width: 0px;">
<div>
<a target="_blank" href="https://example.com/?elqTrackId=1d6421fd2ca1472bb6411c63a31fa818" style="background-color:#E71316;
border:1px solid #E71316;border-radius:1px;color:#ffffff;display:inline-block;font-family:Helvetica, HelveticaArial, sans-serif, HelveticaNeueLTStd-Md;font-size:16px;line-height:30px;text-align:center;text-decoration:none;width:166px;-webkit-text-size-adjust:none;mso-hide:all;">
<span style="position:relative;top:2px;">
FPO CTA
</span>
</a>
</div>
</td>
<!--<![endif]-->
<td id="DesktopOnly" align="left">
<div>
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://example.com/" style="height:30px;v-text-anchor:middle;width:166px;" arcsize="1%" strokecolor="#E71316"
fillcolor="#E71316">
<w:anchorlock/>
<center style="color:#ffffff;font-family:Helvetica, HelveticaArial, sans-serif, HelveticaNeueLTStd-Md;font-size:16px;">
<span style='position:relative;top:2px;'>
FPO CTA
</span>
</center>
</v:roundrect>
<![endif]-->
<!--[if !mso]><!-->
<a target="_blank" href="https://example.com/?elqTrackId=9f1232b523164fd4adf1e73ba8201850" style="background-color:#E71316;
border:1px solid #E71316;border-radius:1px;color:#ffffff;display:inline-block;font-family:Helvetica, HelveticaArial, sans-serif, HelveticaNeueLTStd-Md;font-size:16px;line-height:30px;text-align:center;text-decoration:none;width:166px;-webkit-text-size-adjust:none;mso-hide:all;">
<span style="position:relative;top:2px;">
FPO CTA
</span>
</a>
<!--<![endif]-->
</div>
</td>
</tr>
</table>
</td>
<td width="216" class="em_hide" style="width:216px;mso-line-height-rule: exactly;margin:0;padding:0;"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="50" style="border-collapse:collapse; font-size:50px; line-height:50px;background-color:#098fa1;" bgcolor="#098fa1"> </td>
</tr>
The email is scaling down on phones, causing this, because you have things like width="498" and other wide elements (mobiles can get down to 280px--including all padding). Make the email responsive and the issue should go away. I suggest a complete rebuild, sorry - the code is much too complex for what it needs to be. There are plenty of HTML Email examples and tutorials out there.
From what I see you haven't applied border:none to table (just border-spacing: 0;) - I think you should add that.
I am working on responsive newsletter using HTML, inline css as much as possible and some css also.
I am facing issue in design as i am not able to remove space between first Image and second table after image..
https://codepen.io/KGuide/full/oNXwyEW
html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
background: #fff;
}
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
/* -ms-interpolation-mode:bicubic; */
}
a {
text-decoration: none;
}
.primary{
background: #f5564e;
}
.bg_white{
background: #ffffff;
}
.bg_light{
background: #fafafa;
}
.bg_black{
background: #000000;
}
.bg_dark{
background: rgba(0,0,0,.8);
}
.email-section{
padding:2.5em;
}
/*BUTTON*/
.btn{
padding: 5px 15px;
display: inline-block;
}
.btn.btn-primary{
border-radius: 5px;
background: #f5564e;
color: #ffffff;
}
.btn.btn-white{
border-radius: 5px;
background: #ffffff;
color: #000000;
}
.btn.btn-white-outline{
border-radius: 5px;
background: transparent;
border: 1px solid #fff;
color: #fff;
}
h1,h2,h3,h4,h5,h6{
font-family: 'Nunito Sans', sans-serif;
color: #000000;
margin-top: 0;
}
body{
font-family: 'Nunito Sans', sans-serif;
font-weight: 400;
font-size: 15px;
line-height: 1.8;
color: rgba(0,0,0,.4);
}
a{
color: #f5564e;
}
table{
}
/*LOGO*/
.logo h1{
margin: 0;
}
.logo h1 a{
color: #000;
font-size: 20px;
font-weight: 700;
text-transform: uppercase;
font-family: 'Nunito Sans', sans-serif;
}
.navigation{
padding: 0;
}
.navigation li{
list-style: none;
display: inline-block;;
margin-left: 5px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
}
.navigation li a{
color: rgba(0,0,0,.6);
}
/*HERO*/
.hero{
position: relative;
z-index: 0;
}
.hero .overlay{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
content: '';
width: 100%;
background: #000000;
z-index: -1;
opacity: .3;
}
.hero .icon{
}
.hero .icon a{
display: block;
width: 60px;
margin: 0 auto;
}
.hero .text{
color: rgba(255,255,255,.8);
padding: 0 4em;
}
.hero .text h2{
color: #ffffff;
font-size: 40px;
margin-bottom: 0;
line-height: 1.2;
font-weight: 900;
}
/*HEADING SECTION*/
.heading-section{
}
.heading-section h2{
color: #000000;
font-size: 24px;
margin-top: 0;
line-height: 1.4;
font-weight: 700;
}
.heading-section .subheading{
margin-bottom: 20px !important;
display: inline-block;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 2px;
color: rgba(0,0,0,.4);
position: relative;
}
.heading-section .subheading::after{
position: absolute;
left: 0;
right: 0;
bottom: -10px;
content: '';
width: 100%;
height: 2px;
background: #f5564e;
margin: 0 auto;
}
.heading-section-white{
color: rgba(255,255,255,.8);
}
.heading-section-white h2{
font-family:
line-height: 1;
padding-bottom: 0;
}
.heading-section-white h2{
color: #ffffff;
}
.heading-section-white .subheading{
margin-bottom: 0;
display: inline-block;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 2px;
color: rgba(255,255,255,.4);
}
.icon{
text-align: center;
}
.icon img{
}
<!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 charset="utf-8"> <!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
<meta name="x-apple-disable-message-reformatting"> <!-- Disable auto-scale in iOS 10 Mail entirely -->
<title></title> <!-- The title tag shows in email notifications, like Android 4.4. -->
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:200,300,400,600,700,800,900" rel="stylesheet">
<title></title> <!-- The title tag shows in email notifications, like Android 4.4. -->
</head>
<style>
</style>
<body>
<table style="width:100%; text-align:center;">
<tr>
<td style="width:100%; text-align:center; border-spacing: 0px;" >
<table align="center" style="width:100%; max-width:600px;">
<tr>
<td ><img src="https://dummyimage.com/600x400/cf30cf/fff.jpg" alt="" style="width:100%; max-width: 600px;"></td>
</tr>
<tr>
<td class="">
<table style="width:100%; background:#525252; max-width:600px;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" style="padding:15px; background:#0A0A0A;"> Move-in now to your dream home in City Center Plaza
</td>
</tr>
<tr>
<td align="center" style="padding:15px; background:#0A0A0A;"> BUTTON </td>
</tr>
<tr>
<td style="padding:15px; background:#0A0A0A;">TEXT TEXT TEXT TEXT TEXT</td>
</tr>
<tr>
<td><img src="https://dummyimage.com/600x400/cf30cf/fff.jpg" alt="" style="width:100%; max-width: 600px;"> </td>
</tr>
<tr>
<td valign="top" align="center" style="padding:15px;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Replace your code with this and see if this works:
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:100%; max-width:600px; border-collapse: collapse;">
<tr>
<td>
<img src="https://dummyimage.com/600x400/cf30cf/fff.jpg" alt="" style="margin: 0; border: 0; padding: 0; display: block; width:100%; max-width: 600px;">
</td>
</tr>
Edit:
Here is 2 tutorials they helped me while creating HTML emails:
Build an HTML Email Template From Scratch
How to Code a Responsive Email from Scratch
As pointed out by the other user, some of that space is coming from the the font size.
What I recommend is using either:
line-height: 0;
or
font-size: 0;
To remove that, and then put all text inside spans to put the size back up.
You also need to remove the padding from your cells,
tr, td {
padding: 0;
}
Complete changes required:
tr, td {
padding: 0;
line-height: 0;
}
span {
line-height: 1;
}
Plus wrap all text in spans.
use "font-size: 0;"
and I think solve your problem
Example:-
<td style="font-size: 0;"><img src="https://dummyimage.com/600x400/cf30cf/fff.jpg" alt="" style="width:100%; max-width: 600px;"></td>
I'm trying to make responsive email in HTML but i need to put very long table in table, which is a structure. It's not problem to make table responsive with overflow-x: auto, but it's difficult (for me) to make responsive table in table.
Here's codepen: https://codepen.io/Aventadorrre/pen/NWPeWdd
When you remove whole div table-wrapper then it works perfectly with small devices. When i have this table in table it's only scalling.
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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: 991px;
padding: 10px;
width: 991px;
}
/* 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: 991px;
padding: 10px;
}
/* -------------------------------------
HEADER, FOOTER, MAIN
------------------------------------- */
.locals {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
.locals td {
text-align: center;
padding: 8px;
}
.locals th {
text-align: center;
padding: 8px;
}
.table-title {
margin-top: 35px;
}
.table-wrapper {
margin-bottom: 30px;
}
.about-wrapper p {
margin-bottom: 15px;
}
.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: 768px) {
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>Szanowni Państwo,</p>
<p>Dziękuję serdecznie za zainteresowanie inwestycją Rezydencja Gubałówka. <br><br>W odpowiedzi na zapytanie, załączam kilka informacji dotyczących inwestycji.</p>
<p>Nasza oferta to:</p>
<ul>
<li>Rentowność do 7% w skali roku od wartości zainwestowanej kwoty</li>
<li>W cenie apartamentu wykończenie pod klucz w bardzo wysokim standardzie</li>
<li>Do 2 tygodni pobytu właścicielskiego w roku</li>
<li>200 m od górnej stacji Polany Szymoszkowej </li>
<li>Umowa najmu na 10 lat</li>
<li>Pierwsza wpłata 20% kolejne wraz z realizacją inwestycji</li>
<li>Planowany termin oddania II kwartał 2022 r.</li>
<li>Możliwość rozliczenia podatku VAT (w tym celu zalecamy kontakt z właściwym Urzędem Skarbowym).</li>
</ul>
<p class="table-title"><strong>Poniżej znajduje się przykładowa oferta lokali od 12 do 39 m.kw.</strong></p>
<div class="table-wrapper" style="overflow-x: auto;">
<table class="locals">
<tr>
<th>Budynek</th>
<th>Kondygnacja</th>
<th>Nr lokalu</th>
<th>Powierzchnia po podłodze [m²]</th>
<th>Pokój [m²]</th>
<th>Łazienka [m²]</th>
<th>Balkon [m²]</th>
<th>Antresola [m²]</th>
<th>Cena m² netto</th>
<th>Cena netto</th>
</tr>
<tr>
<td class="align-center">5</td>
<td class="align-center">-1</td>
<td class="align-center">5A-07</td>
<td class="align-center">12,63</td>
<td class="align-center">10,43</td>
<td class="align-center">2,20</td>
<td class="align-center">-</td>
<td class="align-center">-</td>
<td class="align-center">21 900 zł</td>
<td class="align-center">276 597 zł</td>
</tr>
<tr>
<td class="align-center">5</td>
<td class="align-center">-1</td>
<td class="align-center">5A-07</td>
<td class="align-center">12,63</td>
<td class="align-center">10,43</td>
<td class="align-center">2,20</td>
<td class="align-center">-</td>
<td class="align-center">-</td>
<td class="align-center">21 900 zł</td>
<td class="align-center">276 597 zł</td>
</tr>
</table>
</div>
<div class="about-wrapper">
<p>Do każdego lokalu istnieje możliwość zakupu miejsca postojowego w garażu podziemnym w cenie 50.000 zł netto. Kwota ta zalicza się do kwoty zainwestowanej od której naliczany jest czynsz.</p>
<p>Rezydencja Gubałówka to unikalny na skalę polską obiekt położony w Kościelisku na szczycie góry Gubałówka. Dzięki swojej unikalnej lokalizacji, Rezydencja Gubałówka zyskała szerokie grono klientów ceniących Zakopane za shopping i życie nocne (10 min. od Krupówek), wspaniałą naturę (Rezydencję otaczają łąki i lasy) oraz luksus (w obiekcie znajdą Państwo basen, spa, nagradzaną restaurację oraz bardzo wysoki standard wykończenia). Zapierające wdech w piersiach widoki powodują, że Rezydencję odwiedza coraz więcej turystów ceniących piękno natury i aktywną turystykę bez kompromisu.</p>
<p>Obiekt funkcjonuje od 2017 roku o stale rosnącej popularności (<strong>średnia ocena na domain.com to 9,2</strong>). </p>
<p>Zapraszam do odwiedzenia strony naszego obiektu www.domain.com/, <br> oraz strony naszej inwestycji domain.com</p>
</div>
</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">Dział Sprzedaży Rezydencja Gubałówka</span>
</td>
</tr>
</table>
</div>
<!-- END FOOTER -->
</div>
</td>
<td> </td>
</tr>
</table>
</body>
</html>
There are three general ways of tackling responsive tables in HTML emails. Overflow-x will not work across all email clients, so it's not a solution.
Hybrid Column Approach
What you have is:
[head1] [head2] [head3]
[data1] [data2] [data3]
[data4] [data5] [data6]
But what you'll need for mobile responsiveness is a vertical table:
[head1] [data1]
[head2] [data2]
[head3] [data3]
With the second row as another table:
[head1] [data4]
[head2] [data5]
[head3] [data6]
By using the hybrid email approach and hiding the repeated headers by default (for desktop), we can achieve this.
See full write-up with code example for 4 columns here: https://medium.com/#nathankeenmelb/bulletproof-responsive-datatables-in-html-emails-64248b9e18f5
Table as image
You can save the entire table as an image; that way you enable zooming and scrolling for all email clients.
However, it comes with a large drawback in that the data is inaccessible, and requires extensive interaction by the user to read (zooming, constant moving left/right & up/down).
Cards
Does it have to be done as a table? It may be a better approach to group data into a 'card', allowing you to use multiple lines (plus it reads a whole lot better!).
See my write-up here: https://medium.com/#nathankeenmelb/responsive-datatables-through-card-ui-design-for-email-aca6f3c395a2
Please help I cannot figure out how to make table container take 100% width.
I'm previewing HTML in phone with resolution 375px as width but there's seems to be white space area in the right side. I already tried changing min-width to 375px, changing table-layout to auto and width: 100%
For some reason I cannot add code even in Javascript/HTML/CSS snippet, keeps getting my content contains mostly code.
But here's the link to HTML code -
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">
<head></head>
<body class="clean-body" style="margin: 0;padding: 0;-webkit-text-size-adjust: 100%;background-color: #F5F5F5;">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta content="width=device-width" name="viewport">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<title></title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
ol > li,
ul > li,
p,
span,
h1,
h2,
h3,
h4,
h5,
h6,
h7 {
font-size: 14px;
}
table,
td,
tr {
vertical-align: top;
border-collapse: collapse;
}
* {
line-height: inherit;
}
a[x-apple-data-detectors=true] {
color: inherit !important;
text-decoration: none !important;
}
</style>
<style id="media-query" type="text/css">
#media (max-width: 670px) {
#content_con {
padding-left: 20px;
}
.block-grid,
.col {
min-width: 375px !important;
max-width: 100% !important;
display: block !important;
}
.block-grid {
width: 100% !important;
}
.col {
width: 100% !important;
}
.col>div {
margin: 0 auto;
}
img.fullwidth,
img.fullwidthOnMobile {
max-width: 100% !important;
}
.no-stack .col {
min-width: 0 !important;
display: table-cell !important;
}
.no-stack.two-up .col {
width: 50% !important;
}
.no-stack .col.num4 {
width: 33% !important;
}
.no-stack .col.num8 {
width: 66% !important;
}
.no-stack .col.num4 {
width: 33% !important;
}
.no-stack .col.num3 {
width: 25% !important;
}
.no-stack .col.num6 {
width: 50% !important;
}
.no-stack .col.num9 {
width: 75% !important;
}
.video-block {
max-width: none !important;
}
.mobile_hide {
min-height: 0px;
max-height: 0px;
max-width: 0px;
display: none;
overflow: hidden;
font-size: 0px;
}
.desktop_hide {
display: block !important;
max-height: none !important;
}
}
</style>
<table bgcolor="#F5F5F5" cellpadding="0" cellspacing="0" class="nl-container" role="presentation" style="table-layout: fixed;vertical-align: top;min-width: 380px;Margin: 0 auto;border-spacing: 0;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;background-color: #F5F5F5;/* width: 100%; */border: 1px solid black;" valign="top" width="100%">
<tbody>
<tr style="vertical-align: top;" valign="top">
<td style="word-break: break-word; vertical-align: top;" valign="top">
<div style="background-color:transparent;">
<div class="block-grid" style="Margin: 0 auto; min-width: 375px; max-width: 650px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: #000000;">
<div style="border-collapse: collapse;display: table;width: 100%;background-color:#000000;">
<div class="col num12" style="min-width: 375px; max-width: 650px; display: table-cell; vertical-align: top; width: 650px;">
<div style="width:100% !important;">
<div style="border-top:0px solid transparent; border-left:0px solid transparent; border-bottom:0px solid transparent; border-right:0px solid transparent; padding-top:30px; padding-bottom:30px; padding-right: 15px; padding-left: 15px;">
<div align="center" class="img-container center fixedwidth" style="padding-right: 0px;padding-left: 0px;">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="background-color:transparent;">
<!-- START CONTENT ROW -->
<div class="block-grid mixed-two-up" style="Margin: 0 auto; min-width: 375px; max-width: 650px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: #e7f1f8;">
<div style="border-collapse: collapse;display: table;width: 100%;background-color:#e7f1f8;">
<div class="col num4" style="display: table-cell; vertical-align: top; max-width: 375px; min-width: 216px; width: 216px;">
<div style="width:100% !important;">
<div style="border-top:0px solid transparent; border-left:0px solid transparent; border-bottom:0px solid transparent; border-right:0px solid transparent; padding-top: 15px; padding-bottom:5px; padding-right: 0px; padding-left: 0px;">
<div style="color:#555555;font-family:Arial, Helvetica Neue, Helvetica, sans-serif;line-height:1.2;padding-top:0px;padding-right:10px;padding-bottom:0px;padding-left:10px;">
<div style="font-family: Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 12px; line-height: 1.2; color: #555555; mso-line-height-alt: 14px;">
<p style="font-size: 14px; line-height: 1.2; mso-line-height-alt: 17px; margin: 0;"><strong>PRODUCT:</strong></p>
</div>
</div>
</div>
</div>
</div>
<div id="content_con" class="col num8" style="display: table-cell; vertical-align: top; min-width: 375px; max-width: 432px; width: 433px;">
<div style="width:100% !important;">
<div style="border-top:0px solid transparent; border-left:0px solid transparent; border-bottom:0px solid transparent; border-right:0px solid transparent; padding-top:15px; padding-bottom:5px; padding-right: 0px; padding-left: 0px;">
<div style="color:#555555;font-family:Arial, Helvetica Neue, Helvetica, sans-serif;line-height:1.2;padding-top:0px;padding-right:10px;padding-bottom:0px;padding-left:10px;">
<div style="font-family: Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 12px; line-height: 1.2; color: #555555; mso-line-height-alt: 14px;">
<p style="font-size: 14px; line-height: 1.2; mso-line-height-alt: 17px; margin: 0;">Test</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
You have a div-element which gets 100% width for hyaving class .col and 20px padding-left for having id #content_con.
Therefore, it's 100% + 20px wide.
You can include de padding in the width-calculation by adding box-sizing.
#content_con {
padding-left: 20px;
box-sizing: border-box;
}
Your <meta>, <title>, and <style> tags belong inside <head> instead of <body> by the way!
Beginner at HTML. I have created this html email that displays perfectly fine and central in thunderbird but in Apple Mail, it is stuck on the right, anyone got any ideas?
this is the email in apple mail that is aligned to the right - I want it in the centre!
<!DOCTYPE html><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width">
<title>Fusion CSA Accept Email</title>
<style type="text/css">
/* -------------------------------------
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;
}
.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="" style="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="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; background-color: #f6f6f6;">
<tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;"> </td>
<td class="container" style="font-family: sans-serif; font-size: 14px; vertical-align: top; display: block; Margin: 0 auto; max-width: 580px; padding: 10px; width: 580px;">
<div class="content" style="box-sizing: border-box; display: block; Margin: 0 auto; max-width: 580px; padding: 10px;">
<!-- START CENTERED WHITE CONTAINER -->
<span class="preheader" style="color: transparent; display: none; height: 0; max-height: 0; max-width: 0; opacity: 0; overflow: hidden; mso-hide: all; visibility: hidden; width: 0;">This is preheader text. Some clients will show this text as a preview.</span>
<table class="main" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; background: #ffffff; border-radius: 3px;">
<!-- START MAIN CONTENT AREA -->
<tr>
<td class="wrapper" style="font-family: sans-serif; font-size: 14px; vertical-align: top; box-sizing: border-box; padding: 20px;">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;">
<tr>
<th>
<img src="http://fusiondiscordbots.com/Email Images/icon.png" height="50px" width="100px">
<h1 style="font-family: SinkinSans 300Light; font-size: 250%;">Thanks for applying</h1>
</th>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;">
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px; Margin-top: 20px;">Hi [INSERT NAME],</p>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal;">We would like to thank you for your applciation to become a Fusion Customer Support Agent. After carefully reviewing your application, we have decided to <font color="green"><i><b>Accept</b></i></font> your application. We look forward to welcoming you to the team and working with you in the future.</p>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal;">In the next 48 hours, we will send you some information about your role. In this information will be some terms that we require you to accept by emailing us back. Once the terms have been accepted, we will announce your new position to the server and give you your new role.</p>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal;">Well all thats left to say is... Congratulations!</p>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal;">With appreciation,</p>
<img src="http://fusiondiscordbots.com/Email Images/seansignature.png" height="50px">
<p style="width: 50%;">Sean Hatch<br>
Fusion Managing Director</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- END CENTERED WHITE CONTAINER -->
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
I just want to be able to send this email to couple of people but I want it to look professional and line up in the centre of all email clients. If anyone could help, it would be appreciated.
Thanks in advance,
Sean.
Your email looks fine in every Apple and IOS email client I looked at in Litmus. The logo and “Thanks for Applying” are not centered in Yahoo! mail.
The biggest issue is that you're not properly formatting your height and width for the logo and the signature graphics.
Instead of this:
icon.png" height="50px" width="100px"
Do this:
icon.png" height="50" width="100"
Outlook doesn't understand height="50px" so the images are the size of the width of the email. That fix and adding a center tag to the table cell for the logo makes your email look great for your recipients.
Good luck to [INSERT NAME] on their new job.
I have successfully used style="text-align: center;" as an inline style for the <tr> elements to centre content.