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!
Related
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>
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
I have created 3 divs that line side-by-side on 1 row on desktop view but I would like each div to stack vertically on mobile devices only. I can't seem to figure out the correct CSS code/media query for this.
This is the HTML div code I'm using in the body of the post:
<div style="float: left; width: 30%; margin-right: 5px;">
SOURCE 1
<div style="float: left; width: 30%; margin-right: 5px;">
SOURCE 2
<div style="float: left; width: 30%; margin-right: 5px;">
SOURCE 3
Here is the full HTML code--I am embedding 3 Instagram photos.
div style="float: left; width: 30%; margin-right: 3px;">
blockquote class="instagram-media" style="background: #FFF; border: 0; border-radius: 3px; box-shadow: 0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; padding: 0; width: calc(100% - 2px);" data-instgrm-captioned="" data-instgrm-version="6">
div style="padding: 1px;">
div style="background: #F8F8F8; line-height: 0; margin-top: 40px; padding: 50.0% 0; text-align: center; width: 100%;"></div>
a style="color: #000; font-family: Arial,sans-serif; font-size: 14px; font-style: normal; font-weight: normal; line-height: 17px; text-decoration: none; word-wrap: break-word;" href="https://www.instagram.com/p/BC2kmbmhTOY/" target="_blank">#CherryBlossom #Doughnuts: Vanilla Cream Cheese Glaze w/ a #Cherry Filling, and featuring a #CherryBlossomTree design made with Chocolate (tree) and Cherry Buttercream Flowers Available Soon! March 15 to April 17.</a>
A photo posted by Astro Doughnuts (#astrodoughnuts) on <time style="font-family: Arial,sans-serif; font-size: 14px; line-height: 17px;" datetime="2016-03-12T12:17:51+00:00">Mar 12, 2016 at 4:17am PST</time>
/div></blockquote>
script src="//platform.instagram.com/en_US/embeds.js" async="" defer="defer">
/script>
/div>
div style="float: left; width: 30%; margin-right: 3px;">
blockquote class="instagram-media" style="background: #FFF; border: 0; border-radius: 3px; box-shadow: 0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; padding: 0; width: calc(100% - 2px);" data-instgrm-captioned="" data-instgrm-version="6">
div style="padding: 1px;">
div style="background: #F8F8F8; line-height: 0; margin-top: 40px; padding: 50.0% 0; text-align: center; width: 100%;"></div>
a style="color: #000; font-family: Arial,sans-serif; font-size: 14px; font-style: normal; font-weight: normal; line-height: 17px; text-decoration: none; word-wrap: break-word;" href="https://www.instagram.com/p/BCq4otrp-ZW/" target="_blank">Spring truly arrives when flowers start blooming, and our #CherryBlossom macaron has certainly begun showing its petals! Sweet and subtle, it's the perfect spring bite. #oliviamacaron #frenchmacarons #springtime #GeorgetownDC #ShopTysons #DCeats</a>
A photo posted by Olivia Macaron (#oliviamacaron) on <time style="font-family: Arial,sans-serif; font-size: 14px; line-height: 17px;" datetime="2016-03-07T23:22:02+00:00">Mar 7, 2016 at 3:22pm PST</time>
/div>
/blockquote>
script src="//platform.instagram.com/en_US/embeds.js" async="" defer="defer">
/script>
/div>
div style="float: left; width: 30%; margin-left: 3x;">
blockquote class="instagram-media" style="background: #FFF; border: 0; border-radius: 3px; box-shadow: 0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; padding: 0; width: calc(100% - 2px);" data-instgrm-captioned="" data-instgrm-version="6">
div style="padding: 1px;">
div style="background: #F8F8F8; line-height: 0; margin-top: 40px; padding: 50.0% 0; text-align: center; width: 100%;"></div>
a style="color: #000; font-family: Arial,sans-serif; font-size: 14px; font-style: normal; font-weight: normal; line-height: 17px; text-decoration: none; word-wrap: break-word;" href="https://www.instagram.com/p/BDJCBpnAi8f/" target="_blank">🌸💕 Happy Saturday! 💕🌸</a>
A photo posted by Georgetown Cupcake (#georgetowncupcake) on <time style="font-family: Arial,sans-serif; font-size: 14px; line-height: 17px;" datetime="2016-03-19T16:21:18+00:00">Mar 19, 2016 at 9:21am PDT</time>
/div>
/blockquote>
script src="//platform.instagram.com/en_US/embeds.js" async="" defer="defer">
/script>
/div>
div style="clear: both; height: 1em;"></div>
You need to use media queries in your css to produce responsive layouts. It can't be done using inline styles.
At a minimum, and from a mobile first approach:
<div>
SOURCE 1
</div>
<div>
SOURCE 2
</div>
<div>
SOURCE 3
</div>
<style>
#media(min-width:768px){
div {
float:left;
width:30%;
margin-right:5px;
}
}
</style>
Here you have three stacked, full width divs. Once the browser or device is equal to or beyond the defined breakpoint of 768px, the new css takes effect to produce three side-by-side divs as defined in the css.
See example. You should use percentage dimensions
.col{
height: 100px;
background-color: red;
margin-bottom: 10px;
}
#media (min-width: 960px){
.col{
float:left;
width: 30%
margin-left: 10%;
}
.col:last-child{
margin-left: 0%;
}
}
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
.block{ text-align: center; width:30%; margin:0px; padding:50px 0; float:left;}
#media only screen and (max-width: 767px) {
.block{ width:100%;}
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="block" style=" background: #f00;">
SOURCE 1
</div>
<div class="block" style=" background: #ccc;">
SOURCE 2
</div>
<div class="block" style=" background: #444;">
SOURCE 3
</div>
Please check hope so this will help full for you
There is different options to do that, but both use media queries.
You can either put each div on display: inline-block on desktop and change them to display: block on mobile. Maybe set a width: 33% for each div (otherwise if your div are too long they won't be side by side).
Or the other solution:
Put your parent element on display: flex on desktop and put it back on display: block on mobile.
.sub { background-color: rgba(200,200,200,0.6); box-sizing: border-box; border-right: 1px solid black; padding: 5px; }
.first { display: flex; }
.first .sub { width: 33.3%; }
.second { display: block; margin-top: 20px; }
.second .sub { width: 100%; }
/* media queries for mobile */
#media (min-width: 320px) and (max-width: 480px) {
.first { display: block; }
.first .sub { width: 100%; }
}
<div class="first">
<div class="sub">One</div>
<div class="sub">Two</div>
<div class="sub">Three</div>
</div>
<div class="second">
<div class="sub">One</div>
<div class="sub">Two</div>
<div class="sub">Three</div>
</div>
use <li> instead of <div>, then use display:inline-block; or display:block;
I am creating an html calendar(cal.ics) invite and it works in email clients like Gmail, Firefox, and YahooMail. But when I try it in thunderbird, the paragraph(p) tags are always off to the right, even though I've explicity set attributes like align left, float: none, etc. Am I doing something wrong? The email is below, is there something missing in my css?
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Follow-Up! Meeting</title>
<style>
/* -------------------------------------
GLOBAL
------------------------------------- */
* {
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-size: 100%;
line-height: 2.0em;
margin: 0;
padding: 0;
text-align: left;
}
img {
max-width: 600px;
width: 100%;
}
body {
-webkit-font-smoothing: antialiased;
height: 100%;
-webkit-text-size-adjust: none;
width: 100% !important;
}
/* -------------------------------------
ELEMENTS
------------------------------------- */
a {
color: #348eda;
}
.btn-primary {
margin-bottom: 10px;
width: auto !important;
}
.btn-primary td {
background-color: #348eda;
border-radius: 25px;
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-size: 14px;
text-align: center;
vertical-align: top;
}
.btn-primary td a {
background-color: #348eda;
border: solid 1px #348eda;
border-radius: 25px;
border-width: 10px 20px;
display: inline-block;
color: #ffffff;
cursor: pointer;
font-weight: bold;
line-height: 2;
text-decoration: none;
}
.last {
margin-bottom: 0;
}
.first {
margin-top: 0;
}
.padding {
padding: 10px 0;
}
/* -------------------------------------
BODY
------------------------------------- */
table.body-wrap {
padding: 20px;
width: 100%;
}
table.body-wrap .container {
border: 1px solid #f0f0f0;
}
/* -------------------------------------
FOOTER
------------------------------------- */
table.footer-wrap {
clear: both !important;
width: 100%;
}
.footer-wrap .container p {
color: #666666;
font-size: 12px;
}
table.footer-wrap a {
color: #999999;
}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1, h2, h3 {
color: #111111;
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 200;
line-height: 1.2em;
margin: 40px 0 10px;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 28px;
}
h3 {
font-size: 22px;
}
p, ul, ol {
font-size: 14px;
font-weight: normal;
margin: 0;
padding: 0;
margin-bottom: 10px;
float: none;
text-align: left;
}
ul li, ol li {
margin-left: 5px;
list-style-position: inside;
}
/* ---------------------------------------------------
RESPONSIVENESS
------------------------------------------------------ */
/* 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 {
clear: both !important;
display: block !important;
Margin: 0 auto !important;
max-width: 600px !important;
}
/* Set the padding on the td rather than the div for Outlook compatibility */
.body-wrap .container {
padding: 20px;
}
/* This should also be a block element, so that it will fill 100% of the .container */
.content {
display: block;
margin: 0 auto;
max-width: 600px;
}
/* Let's make sure tables in the content area are 100% wide */
.content table {
width: 100%;
}
</style>
</head>
<body bgcolor="#f6f6f6">
<!-- body -->
<table width="100%" class="body-wrap" bgcolor="#f6f6f6" cellpadding="0" cellspacing="0" border="0">
<tr>
<td></td>
<td class="container" bgcolor="#FFFFFF"><!-- content -->
<div class="content">
<table width="100%" style="width: 100%; text-align: left;" cellpadding="0" cellspacing="0" border="0">
<tr style="width: 100%; text-align: left;" >
<td align="left" style="width: 100%; text-align: left;" >
Hi John Doe,
<p style="text-align: left; margin: 0px; padding: 0px; float: none; display: block;">
You have been invited to attend a meeting.
</p>
<h4>Topic</h4>
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0; text-align:left;" >A Samle Meeting!</p>
<h4>Summmary</h4>
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0; text-align:left;" >
A sample meeting to prove the concept work andthen take it form there
</p>
<h4>Location</h4>
<p>
123 Example Street New york, NY
</p>
<h4>Time</h4>
<p>
From: February 7, 2016, 2:28 am GMT-0500 <br />
To: February 9, 2016, 3:50 pm GMT-0500
</p>
<h4>Next Steps</h4>
<p>
You may view more information on the meeting by clicking the link below
</p><!-- button -->
<table class="btn-primary" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>View Meeting</td>
</tr>
</table><!-- /button -->
<p>
Please adjust your meeting schedule infomration there.
</p>
<p>
Thanks,
</p>
</td>
</tr>
</table>
</div><!-- /content --></td>
<td></td>
</tr>
</table>
<!-- /body -->
<!-- footer -->
<table class="footer-wrap">
<tr>
<td></td>
<td class="container"><!-- content -->
<div class="content">
<table>
<tr>
<td align="center">
</td>
</tr>
</table>
</div><!-- /content --></td>
<td></td>
</tr>
</table>
<!-- /footer -->
</body>
</html>
Tested your email in latest Thunderbird and paragraphs seem to be where they should be.
You may be however referring to the 20px padding set on the "container" with white background. Removing the padding will make the text stick to the left side of white space.
Since both Gmail and Yahoo ignore CSS in HEAD you do not see the padding there.
Personally I would advice against removing the padding for esthetic reason.
Preview in Thunderbird 38.5.1 (Windows)
The problem quite stupid actually. Apparently the spaces in the html were causing the problem.So I changed
<p style="text-align: left; margin: 0px; padding: 0px; float: none; display: block;">
You have been invited to attend a meeting.
</p>
To
<p style="text-align: left; margin: 0px; padding: 0px; float: none; display: block;">You have been invited to attend a meeting</p>
With no space and problem fixed