Content not centered mac os Mail when attachement
Closed this issue · 7 comments
Rieranthony commented
Hi there,
First of all thanks for this awesome template.
I have got a weird behaviour on mac os Mail app.
If I'm attaching an ICS file to the email, the content of the email isn't centred anymore (only the main block part).
I'm using Amazon SES to send emails from a NodeJS app using NodeMailer.
Also, the css is inlined.
Any idea on this one?
Thanks!
leemunroe commented
Interesting, haven't seen this before. Have you got an example of the compiled code you're sending? Is the issue only on macOS Mail? Also feel free to send me an example with the attachment so I can take a look (lee@leemunroe.com).
Rieranthony commented
Thanks for your answer @leemunroe,
No, this behaviour is only on the Mail app on Mac OS.
I'm observing the same behaviours in this email client when I'm writing an email and I'm dragging and dropping a file in it: the files are added in the text itself, maybe it is doing the same here?
I'll send you an email example on this email, thanks again!
Anthony:
PS: This is the compiled code that I'm sending:
`
<!doctype html>
<title>Meeting invitation: New test name @ Tue June 20, 2017 - 11:15 (UTC+01:00)</title>
<style>
@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;
}
}
@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 role="presentation" border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: separate; mso-table-lspace:0pt; mso-table-rspace: 0pt; background-color: #f6f6f6; width: 100%;" width="100%" bgcolor="#f6f6f6">
<tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;" valign="top"> </td>
<td class="container" style="font-family: sans-serif; font-size: 14px; vertical-align: top; display: block; max-width: 580px; padding: 10px; width: 580px; Margin: 0 auto;" width="580" valign="top">
<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 role="presentation" class="main" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background: #ffffff; border-radius: 3px; width: 100%;" width="100%">
<!-- 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;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%">
<br>
<p class="small-title" style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; text-align: center; color: #999999; margin-bottom: 0px;">MEETING INVITATION</p>
<h2 style="color: #000000; font-family: sans-serif; font-weight: 400; line-height: 1.4; margin: 0; margin-bottom: 30px; text-align: center;">New test name</h2>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; margin-bottom: 15px;"><b>Maxime Julian</b> invited you to a 2-hour 15-minute meeting on Tuesday June 20 2017, 11:15 (UTC+01:00).</p>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; margin-bottom: 15px;"><b>Location:</b><br>241 The Water Gardens, W22DG, London, United Kingdom </p>
<br>
<table border="0" cellpadding="0" cellspacing="0" class="btn btn-link" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; box-sizing: border-box; width: 100%;" width="100%">
<tbody>
<tr>
<td align="center" class="no-padding" style="font-family: sans-serif; font-size: 14px; vertical-align: top; padding-bottom: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="10" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
<tbody>
<tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #ffffff;border-radius: 5px; text-align: center;" valign="top" bgcolor="#ffffff" align="center"> <a href="https://app.get-hermes.com/meetings/eaKVocBDvST8gKTN108Ke/accepted" target="_blank" class="going" style="border-radius: 5px; box-sizing: border-box; cursor: pointer; display: inline-block; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-decoration: none; text-transform: capitalize; border: none; background-color: #00b894; border-color: #00b894; color: white; margin-bottom: 0px;">I'm Going</a></td>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #ffffff;border-radius: 5px; text-align: center;" valign="top" bgcolor="#ffffff" align="center"> <a href="https://app.get-hermes.com/meetings/eaKVocBDvST8gKTN108Ke/refused" target="_blank" class="not-going" style="border-radius: 5px; box-sizing: border-box; cursor: pointer; display: inline-block; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-decoration: none; text-transform: capitalize; border: none; background-color: #fd3939; border-color: #fd3939; color: white;">Not going</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</table>
</td>
</tr>
<!-- END MAIN CONTENT AREA -->
</table>
<!-- START FOOTER -->
<div class="footer" style="clear: both; Margin-top: 10px; text-align: center; width: 100%;">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%">
<!-- LEGAL BOTTOM BLOCK <tr>
<td class="content-block">
<span class="apple-link">Company Inc, 3 Abbey Road, San Francisco CA 94102</span>
<br> Don't like these emails? <a href="http://i.imgur.com/CScmqnj.gif">Unsubscribe</a>.
</td>
</tr> -->
<tr>
<td style="font-family: sans-serif; vertical-align: top; color: #999999; font-size: 12px; text-align: center;" valign="top" align="center">
<img class="smallLogo" id="logo" title="Hermes logo" alt="Hermes logo" src="https://s3.eu-west-2.amazonaws.com/static.get-hermes.com/hermes-logo-blue-email.png" style="border: none; -ms-interpolation-mode: bicubic; max-width: 100%; width: 30px;" width="30">
</td><td style="font-family: sans-serif; vertical-align: top; color: #999999; font-size: 12px; text-align: center;" valign="top" align="center">
</td></tr>
<tr>
<td class="content-block powered-by" style="font-family: sans-serif; vertical-align: top; padding-bottom: 10px; padding-top: 10px; color: #999999; font-size: 12px; text-align: center;" valign="top" align="center">
Powered by <a href="https://get-hermes.com" style="color: #999999; font-size: 12px; text-align: center; text-decoration: none;">Hermes</a>.
</td>
</tr>
</table>
</div>
<!-- END FOOTER -->
<!-- END CENTERED WHITE CONTAINER -->
</div>
</td>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;" valign="top"> </td>
</tr>
</table>
</body>
</html>
`
leemunroe commented
Confirmed, seeing the same thing. Looking into it.
Apple Mail
Gmail
Rieranthony commented
Thanks! I didn't find any solution for now ...
IrinaTen commented
I have changed the class name "container" to a less generic one and it fixed the issue for me.
leemunroe commented
Woah how did you figure that out?
@Rieranthony can you test and confirm?
Rieranthony commented