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
Related
I am trying to add a responsive html email to send to the user a link to reset their password. The left padding is not working and I would like it to be responsive like the right side, to have the container always centered.
What line of code is missing inside my inline css for my left padding to perform?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html" />
<title>StackOverflow</title>
<style>
/*
// MARK: Styling
*/
.button {
border-radius: 4px;
font-family: -apple-system-body, BlinkMacSystemFont, sans-serif;
color: white;
padding: 12px 12px;
text-decoration: none;
display: inline-block;
}
.buttonPassword {
margin: auto;
}
#buttonReset {
width: 150px;
margin: auto;
font-family: -apple-system-body, BlinkMacSystemFont, sans-serif;
text-align: center;
border: none;
border-radius: 6px;
cursor: pointer;
font-weight: bold;
}
body {
position: relative;
margin: 16;
font-family: -apple-system-body, BlinkMacSystemFont, sans-serif;
}
.container {
display: block;
margin: 16 auto !important;
max-width: 580px;
padding: 10px;
width: 580px;
}
.content {
box-sizing: border-box;
display: block;
margin: 16 auto;
max-width: 580px;
padding: 10px;
}
footer {
width: 100%;
font-family: -apple-system-caption2, BlinkMacSystemFont, sans-serif;
}
header {
margin: auto;
width: 100%;
position: relative;
z-index: 100;
top: 0;
}
html, body {
min-height: 100vh;
display: flex;
flex-direction: column;
margin: 16;
padding: 16;
}
.logo h1 {
font-family: -apple-system-large-title, BlinkMacSystemFont, sans-serif;
display: inline;
}
.logo img {
padding: 16px;
width: 64px;
height: 64px;
vertical-align: middle;
}
p {
font-family: -apple-system-body, BlinkMacSystemFont, sans-serif;
}
.preheader {
color: transparent;
display: none;
height: 0;
max-height: 0;
max-width: 0;
opacity: 0;
overflow: hidden;
mso-hide: all;
visibility: hidden;
width: 0;
}
.right h2 {
font-family: -apple-system-caption2, BlinkMacSystemFont, sans-serif;
text-align: center;
padding: 1em;
}
/*
// MARK: Screen Sizing
*/
#media only screen and (max-width: 620px) {
.logo h1 {
display: inline;
}
.logo img {
padding: 8px;
width: 48px;
height: 48px;
vertical-align: middle;
}
table[class=body] .content {
padding: 0 !important;
}
table[class=body] .container {
padding: 0 !important;
width: 100% !important;
}
}
/*
// MARK: Colors Declaration
// Light Mode
*/
.button {
background-color: #FF9000;
}
#buttonReset {
background-color: #FF9000;
}
.content {
color: #000;
}
header {
background: linear-gradient(#FF9000, #FFA101);
}
.logo h1 {
color: #FFF;
}
.preheader {
color: transparent;
}
.right h2 {
color: #FFF;
}
/*
// Dark Mode
*/
#media (prefers-color-scheme: dark) {
.button {
background-color: #FF9A0A;
}
.content {
color: #FFF;
}
header {
background: linear-gradient(#FF9A0A, #FF9000);
}
.logo h1 {
color: #FFF;
}
.preheader {
color: transparent;
}
.right h2 {
color: #000;
}
}
</style>
</head>
<body>
<span class="preheader">
Email with instructions to reset your password.
</span>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body">
<tr>
<td> </td>
<td class="container">
<header>
<div class="logo">
<h1><img src="/images/logo.png" alt="logo">StackOverflow</h1>
</div>
</header>
<div id="content">
<br>
<p>
Hello,
<br><br>
A request has been received to change the password for your StackOverlfow account.
<br><br><br>
<p>
<center>
<p>
Click the link below to reset your password.
<p>
</p>
</center>
</p>
</p>
<br>
<div class="buttonPassword">
<center>
<a class="button" href="#(link)">
<strong>Reset password</strong>
</a>
</center>
</div>
<br>
<br>
<p>
The link has a validity of one hour. Ask for a new one after this delay.
<br>
If you did not initiate this request, please contact us immediately at contact#stackoverflow.eu and ignore this
email.
</p>
<br>
<p>
Thank you,
<br>
The StackOverlfow Team
</p>
<br>
</div>
<footer>
<div class="right">
<center>
<p>© 2021 StackOverlfow. All right reserved.</p>
</center>
</div>
</footer>
</td>
<td> </td>
</tr>
</table>
</body>
</html>
Solution 1:
You can make your container centered for every screen and responsive by just changing your container class margin with (0 auto) which centers the div automatically.
.container {
display: block;
margin: 0 auto !important;
max-width: 580px;
padding: 10px;
width: 580px;
}
Watch the final result on my code_pen
Solution 2:
simply add align=center in your table tag.
Add align="center" on table
<table role="presentation" border="0" align="center" cellpadding="0" cellspacing="0" class="body">
https://jsfiddle.net/lalji1051/fgw258dr/
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
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.
When i re-size my browser and scroll to the right end,
I get the header like the following figure, http://awesomescreenshot.com/02a29uof91
This is my output
Even stackoverflow Header too display like this..
How to fill the header when scrolling right?
CSS
body
{
margin: 0;
padding: 0;
line-height: 1.5em;
font-family: Arial, Helvetica, sans-serif;
color: #666;
background: #fff;
}
#templatemo_header_wrapper
{
height: 114px;
margin: 0 auto;
background: #19446a url(images/templatemo_header_bg.jpg) repeat-x;
}
#templatemo_header
{
width: 1200px;
margin: 0 auto;
}
#templatemo_menu_wrapper
{
clear: both;
width: 100%;
height: 41px;
margin: 0 auto;
background: url(images/templatemo_menu_bg.jpg) repeat-x;
}
#templatemo_menu
{
width: 1320px;
height: 41px;
margin: 0 auto;
}
#templatemo_menu ul
{
margin: 0 0 0 28px;
padding: 0px;
list-style: none;
}
#templatemo_menu ul li
{
padding: 0px;
margin: 0px;
display: inline;
}
#templatemo_menu ul li a
{
float: left;
display: block;
height: 22px;
width: 115px;
padding: 13px 0 0 0;
background: url(images/templatemo_menu.jpg) bottom no-repeat;
text-align: center;
font-size: 14px;
text-decoration: none;
color: #FFF;
font-weight: bold;
outline: none;
}
HTML
<div id="templatemo_header_wrapper" >
<div id="templatemo_header">
<div class="style1">
<table width="1200px">
<tbody>
<tr>
<td style="text-align: left">
<p>
Heading
</p>
</td>
<td align="right">
<table>
<tbody>
<tr>
<td>
<img height="50px" src="images/x.PNG" alt="x">
</td>
<td>
<strong><span style="font-family: Times New Roman; text-transform: uppercase; font-size: 18pt;">
Comapny name</span></strong>
<br>
<span style="font-size: 14px; font-weight: normal;">Pvt.
Ltd.</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Some code would be helpful.
Genrally, if you want things to fill horizontally, you need to specify a 100% width container and then place (or float) elements within it.
And I don't see anything like this on stackoverflow.com, regardless of how wide I make the window.