I'm creating an email newsletter and actually testing around with various (native and web) mail clients. So far, Gmail, Outlook.com (native) iOS Mail Client are showing the email as expected. Only MacOS's native mail client cuts off the end of the mail, but the HTML code is still there (when opening the raw source in Apple Mail). Does anyone knows what how to prevent this?
So far, I tried to add empty div elements, line breaks (< br >), and an image. The last option has shown the the expected text, but cut off the image.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
<head><meta name="viewport" content="width=device-width,initial-scale=1" /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Unread News | Issue #1 14.05.2019</title>
<style type="text/css">* {
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
a {
color: #2ba9e0;
text-decoration: none;
text-decoration-style: initial;
text-decoration-color: initial;
}
p {margin: 1em 0;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
h1 {
text-align: center;
font-size: 40px;
margin-bottom: 20px;
line-height: 1.2em;
font-weight: 300;
text-transform: none;
}
h1, h2, h3, h4, h5, h6 {color: #3A3A3A !important;} /* or whatever color you want it to be */
h2 {
font-size: 30px;
margin-bottom: 20px;
line-height: 1.2em;
font-weight: 300;
text-transform: none;
}
h3 {
font-size: 20px;
margin-bottom: 20px;
line-height: 1.2em;
font-weight: 400;
text-transform: none;
}
body {
margin: 0;
padding: 0;
color: #3a3a3a;
font-weight: 400;
text-transform: none;
font-size: 17px;
line-height: 1.5;
}
table {
background: white;
max-width: 1300px;
margin-left: auto;
margin-right: auto;
line-height: 100% !important;
}
p {
margin: 0;
padding: 0;
}
.logo {
margin-top: 3vh;
width: 80%;
max-width: 400px;
}
.subject-td {
max-width: 100%;
margin-top: 10px;
}
.center__text {
text-align: center;
}
.main__content {
padding-left: 5%;
padding-right: 5%;
padding-bottom: 5%;
}
.small {
font-size: 12px;
}
.footer{
padding-top: 10px;
}
</style>
</head>
<body>
<p></p>
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="small center__text">Wenn du Unread durch Zufall erhalten hast, kannst du dich <a href="https://unread.news?newsletters_link=e4f7fa2ee4e645fd368c7ea87ca3b13d&history_id=1">hier</a> anmelden!</td>
</tr>
<tr>
<td class="small center__text">Wenn Dir Unread gefällt, dann nimm Dir eine Sekunde Zeit und leite diese Mail an deine Freunde weiter.</td>
</tr>
<tr>
<td class="center__text"><img class="logo" src="data:image/png;base64, ... base64 goes here ... " /></td>
</tr>
<tr>
<td class="subject-td center__text">
<h1>Unread News | Issue #1 14.05.2019</h1>
</td>
</tr>
<tr>
<td class="main__content"><div class="newsletters_content"><h2>Category 1</h2>
<h3><a href="#">Lorem Ipsum Dolor Sit Amet</a></h3>
<div>Lorem Ipsum Dolor Sit Amet</div>
<h3><a href="#">Internet-Scanner: Zivilgesellschaft warnt vor zunehmender Deep Packet Inspection (7 Minuten Lesezeit)</a></h3>
<div>Lorem Ipsum Dolor Sit Amet</div>
<h2>Category 2</h2>
<h3><a href="#">Lorem Ipsum Dolor Sit Amet</a></h3>
<div>Lorem Ipsum Dolor Sit Amet</div>
<h3><a href="https://unread.news?newsletters_link=3482e6577f5b6e4782986af5f755444e&history_id=1">Internet-Scanner: Zivilgesellschaft warnt vor zunehmender Deep Packet Inspection (7 Minuten Lesezeit)</a></h3>
<div>Lorem Ipsum Dolor Sit Amet</div>
<h2>Category 3</h2>
<h3><a href="#">Lorem Ipsum Dolor Sit Amet</a></h3>
<div>Lorem Ipsum Dolor Sit Amet</div>
<h3><a href="https://unread.news?newsletters_link=3482e6577f5b6e4782986af5f755444e&history_id=1">Internet-Scanner: Zivilgesellschaft warnt vor zunehmender Deep Packet Inspection (7 Minuten Lesezeit)</a></h3>
<div>Lorem Ipsum Dolor Sit Amet</div>
<h2>Category 4</h2>
<h3><a href="#">Lorem Ipsum Dolor Sit Amet</a></h3>
<div>Lorem Ipsum Dolor Sit Amet</div>
<h3><a href="https://unread.news?newsletters_link=3482e6577f5b6e4782986af5f755444e&history_id=1">Internet-Scanner: Zivilgesellschaft warnt vor zunehmender Deep Packet Inspection (7 Minuten Lesezeit)</a></h3>
<div>Lorem Ipsum Dolor Sit Amet</div>
</div></td>
</tr>
<tr>
<td class="small footer center__text">This is emai was sent ...</td>
</tr>
<tr>
<td class="small center__text">You are receiving this mail ... <a class="newsletters_unsubscribe newsletters_link" href="#" title="Abonnement Deaktivieren" style="color:;">Abonnement Deaktivieren</a>.</td>
</tr>
<tr>
<td class="small center__text"><a class="newsletters_online newsletters_link" href="#" style="color:;">E-Mail ausdrucken</a></td>
</tr>
</tbody>
</table>
</body>
</html>
Apple Mail cuts off (does not show) the last three tags:
</tr>
<tr>
<td class="small footer center__text">This is emai was sent ...</td>
</tr>
<tr>
<td class="small center__text">You are receiving this mail ... <a class="newsletters_unsubscribe newsletters_link" href="#" title="Abonnement Deaktivieren" style="color:;">Abonnement Deaktivieren</a>.</td>
</tr>
<tr>
<td class="small center__text"><a class="newsletters_online newsletters_link" href="#" style="color:;">E-Mail ausdrucken</a></td>
</tr>
But I expect to see them.
That's an odd one. I can't find anything particularly wrong with your code. I replaced the head portion with a snippet from one of my templates and nothing worked. Your code is very light weight too, so no issues with code bloat or hidden errors.
One thing that did work and is annoyingly hacky is adding padding to the bottom of the email. I wrapped the content in another table and set padding on the table cell wrapping the table with your content. 50 pixels padding was enough to push Apple Mail down and show all three lines.