@Charlotte: By <style> tags, I do mean the style in the CSS at the top of your emails. Inline style attributes are well supported widely.
I think Gmail renderings on iOS on Litmus are done with a non Gmail address, thus falling into what we call a GANGA rendering (Gmail Apps with Non Gmail Accounts). In this case, <style> elements are not supported. So make sure your email can work appropriately without any <style> tag.
Hi Charlotte,
I just checked your code, and it looks like the code for your "doesn't get burned" banner is different in the two versions you posted.
Here's the one WITHOUT the merge fields:
<!-- ORDER BETTER -->
<tr>
<td class="web-image" style="font-size:0pt; line-height:0pt; text-align:left;">
<a href="https://get.chownow.com/order-better/?utm_source=iterable&utm_medium=email&utm_campaign=monthly_taste_sep19" target="_blank"><img class="text" src="https://d2axdqolvqmdvx.cloudfront.net/196576de-cee8-4d4d-991d-609b0497689e/OrderBetter_Footer2x.png" width="600" border="0" alt="Order Better" style="color:#0b2135; font-family:'Lato', Arial, sans-serif; font-size:18px; line-height:22px; text-align:left; width: 100%;" /></a>
</td>
</tr>
<tr>
<td class="mobile-image" style="font-size:0pt; line-height:0pt; text-align:left;">
<a href="https://get.chownow.com/order-better/?utm_source=iterable&utm_medium=email&utm_campaign=monthly_taste_sep19" target="_blank"><img class="text" src="https://d2axdqolvqmdvx.cloudfront.net/67920096-9e2e-4420-9976-e534f0ca65b0/Mobile_OrderBetter_Footer2x.png" width="600" border="0" alt="Order Better" style="color:#0b2135; font-family:'Lato', Arial, sans-serif; font-size:18px; line-height:22px; text-align:left; width: 100%;" /></a>
</td>
</tr>
<!-- END ORDER BETTER -->
Here's the one WITH the merge fields:
<!-- ORDER BETTER -->
<tr>
<td width="600" align="center" class="web-image" style="font-size:0pt; line-height:0pt; text-align:center;">
<a href="https://get.chownow.com/order-better/?utm_source=iterable&utm_medium=email&utm_campaign=monthly_taste_sep19" target="_blank"><img class="text" src="https://d2axdqolvqmdvx.cloudfront.net/196576de-cee8-4d4d-991d-609b0497689e/OrderBetter_Footer2x.png" width="600" border="0" alt="Order Better" style="color:#0b2135; font-family:'Lato', Arial, sans-serif; font-size:18px; line-height:22px; text-align:left;" /></a>
</td>
</tr>
<tr>
<td width="600" class="mobile-image" style="font-size:0pt; line-height:0pt; text-align:left;">
<a href="https://get.chownow.com/order-better/?utm_source=iterable&utm_medium=email&utm_campaign=monthly_taste_sep19" target="_blank"><img class="text" src="https://d2axdqolvqmdvx.cloudfront.net/67920096-9e2e-4420-9976-e534f0ca65b0/Mobile_OrderBetter_Footer2x.png" width="100%" border="0" alt="Order Better" style="color:#0b2135; font-family:'Lato', Arial, sans-serif; font-size:18px; line-height:22px; text-align:left;" /></a>
</td>
</tr>
<!-- END ORDER BETTER -->
If I apply the WITHOUT version to your merge version, everything seems to works fine.
Hello,
I tested your code with the following video, and everything works as expected on iOS 12.4 on Apple Mail. So my guess is the problem is not iOS related.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Video</title>
<style>
.video-wrapper {display:none;}
@media (-webkit-min-device-pixel-ratio: 0) and (min-device-width:1024px)
{
.video-wrapper { display:block!important; }
.video-fallback { display:none!important; }
}
@supports (-webkit-overflow-scrolling:touch) and (color:#ffffffff) {
div[class^=video-wrapper] { display:block!important; }
div[class^=video-fallback] { display:none!important; }
}
#MessageViewBody .video-wrapper { display:block!important; }
#MessageViewBody .video-fallback { display:none!important; }
</style>
</head>
<body>
<a href="https://litmus.com/community/discussions/8164-html5-video-in-email-not-showing-in-ios-12-4">html5 Video in email not showing in iOS 12.4?</a>
<!-- MOVIE -->
<!-- video section -->
<div class="video-wrapper" style="display:none;">
<video width="100%" controls="" poster="https://www.html5rocks.com/en/tutorials/video/basics/poster.png">
<source src="https://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4" type="video/mp4">
<!-- fallback 1 -->
<a href="https://link.com"><img width="640" style="display:block;width:100%;min-width:100%;max-width:100%;height:auto;" src="http://www.html5rocks.com/en/tutorials/video/basics/poster.png" alt=""></a>
</video>
</div>
<!-- fallback section -->
<div class="video-fallback">
<a href="https://link.com"><img width="640" style="display:block;width:100%;min-width:100%;max-width:100%;height:auto;" alt="" src="http://www.html5rocks.com/en/tutorials/video/basics/poster.png"></a>
</div>
<!-- /MOVIE -->
</body>
</html>
Hello Charlotte,
I'd say the problem comes from the bottom image Mobile_OrderBetter_Footer2x.png. It doesn't have any width set, so it will display at its natural 750px width. Because of that, your entire email will behave as if it's 750px wide. Because of that, Apple Mail on iOS will resize your entire email to fit the screen size, and thus make your text smaller than they should.
So add a style="width:100%;" on that image and you should be good.
Hi Steven ! Nice to see you've been experimenting with my technique. I gave a quick look at your code, and I think the problem comes from this:
<a href="http://example.com" style="display:block;text-decoration:none;">
<p id="COPY-normal">
LEFT (scale)
</p>
</a>
While wrapping any content in an <a> element is perfectly valid in HTML5, some email clients don't support this. Especially Outlook and it's word rendering engine. So I would strongly advise against this, and use a single <a> at the text level only. Like this:
<p id="COPY-normal">
<a href="http://example.com" style="display:block;text-decoration:none;">
LEFT (scale)
</a>
</p>
Let me know if you have any other question.
Hi Jun,
This has changed indeed in the past two months. A new way to target Outlook.com is to use an attribute selector with a class prefixed by x_. Example :
[class="x_fallback"] {
color: #004991;
font-size: 100px;
}
The reason this works is that now Outlook.com supports attribute selectors and keep their values intact. But it will still prefix class names by x_ (and it's the only webmail to use this exact prefix). So <td class="fallback"> will become <td class="x_fallback"> only in Outlook.com and thus the styles will match.
Hello! I wrote an article about Outlook.com's dark mode earlier this year.
A way you can override Outlook.com dark styles is to add a class to the element you want and then use !important declarations.
<table bgcolor="#ffffff" style="width:70%;" align="center" border="0" cellspacing="0" cellpadding="0" class="bgcolor-white"> <tbody> <tr> <td bgcolor="#ffffff" class="bgcolor-white">
<style>
.bgcolor-white { background:white !important; }
</style>
However, I'd really advise not to do this. If someone uses Outlook.com's dark mode, it's because they prefer it that way. They might know about the "Turn the lights on" button because it's presented by Outlook's interface when you activate dark mode the first time.