acorn
acorn copied to clipboard
ThemeMountain
Responsive not working on Outlook app on IOS
The responsive 2 col to 1 col on mobile are not working on Outlook app on IOS. It stay 2 col on mobile where it should only be 1 col. Is there a fix for this problem? I testet this in litmus with boiler template and 2 col element
No idea what changed in that app that is breaking it, but a quick solution would be to use <th> instead of <td> for columns:
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td style="padding: 0 24px;">
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<th class="col" width="260" style="padding: 0 8px;">1</th>
<th class="col" width="260" style="padding: 0 8px;">2</th>
</tr>
</table>
</td>
</tr>
</table>
Note that you'd need to reset the font weight and text centering in this case.
You're welcome, happy to help 🙂
An alternative would be to:
- Remove
box-sizing: border-box;from here and from the body tag - Nest a table inside each
colcell, and use padding inside its cell. Basically, don't use padding oncolcells:
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td style="padding: 0 24px;">
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td class="col" width="260" bgcolor="red">
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td style="padding: 0 8px;">first</td>
</tr>
</table>
</td>
<td class="col" width="260" bgcolor="black" style="color: white;">
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td style="padding: 0 8px;">second</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
Note: I've added bgcolor on those two columns, so you can see how box-sizing affects padding on a col cell.
box-sizing is not very well supported actually, so I'll look into removing it and testing/updating Acorn when I get some time - until then, you can use any of the two solutions 👍
Hmm, actually the above only solves the issue with padding on cells with box-sizing: border-box;. Just tested and it seems Outlook iOS completely ignores any display property I try to use on a <td> to make it stack - so stick to <th> for now 🤷♂️
well, I did some more testing and unfortunately now there is no stacking (using th tag) on the Gmail App: Gmail app Android 6 Gmail app Android 7 Gmail app Android 8
OK, back with some more tests.
I didn't notice it breaking in Outlook iOS before, because Email on Acid uses Outlook on iOS 11, which is quite outdated (but it stacked just fine):
So I tested on an actual device with everything up-to-date.
Code
First, here's the code I used to test.
Note: I removed box-sizing from the boilerplate, as well as any CSS that wasn't needed for the test.
<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="x-apple-disable-message-reformatting">
<title>Acorn Email Framework</title>
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<style>
table {border-collapse: collapse;}
.spacer,.divider {mso-line-height-rule: exactly;}
td,th,div,p,a {font-size: 16px; line-height: 25px;}
td,th,div,p,a,h1,h2,h3,h4,h5,h6 {font-family:"Segoe UI",Helvetica,Arial,sans-serif;}
</style>
<![endif]-->
<style type="text/css">
.col {font-size: 16px; line-height: 25px; vertical-align: top;}
@media only screen and (max-width: 632px) {
.wrapper img {max-width: 100%;}
u ~ div .wrapper {min-width: 100vw;}
.container {width: 100% !important;}
.col {
display: inline-block !important;
line-height: 23px;
width: 100% !important;
}
}
</style>
</head>
<body style="margin:0;padding:0;width:100%;word-break:break-word;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust: 100%;">
<table lang="en" class="wrapper" bgcolor="#EEEEEE" cellpadding="16" cellspacing="0" role="presentation" width="100%">
<tr>
<td align="center">
<table class="container" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" role="presentation" width="600">
<tr>
<td align="left">
<!-- Using <td> -->
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td style="padding: 12px 24px;">With <td></td>
</tr>
<tr>
<td style="padding: 0 24px;">
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td class="col" width="260" style="background-color: #ff0000;">First</td>
<td class="col" width="260" style="background-color: #000000; color: #ffffff;">Second</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Using <th> -->
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td style="padding: 12px 24px;">With <th></td>
</tr>
<tr>
<td style="padding: 0 24px;">
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<th class="col" width="260" style="background-color: #ff0000;">First</th>
<th class="col" width="260" style="background-color: #000000; color: #ffffff;">Second</th>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
iPhone X / iOS 13.3.1 / Outlook 4.24.0
Here's how that looks on an up-to-date iOS and Outlook for iOS.
Note: I've also tried diplay: block; for the .col class - it fails to stack <td>s in Outlook iOS just like display: inline-block; does. Using a <th> works with both display properties.
Gmail app
Using <th> works fine in the Gmail app.
I ran the test in EoA (Pixel Gmail - Android 6, 7, and 8), as well as on a real device with Huawei P10 Lite / Android 8.0.0 / Gmail 2020.01.27.293735221.release
Not sure why it isn't working for you, but if you tested in Litmus is there any chance they're using a GANGA (Gmail IMAP) account?
Here's what I got:
Conclusion
I think I'll run a full test suite with <th> and probably switch to using that in Acorn (with font weight and centering resets included). It's gross and I don't like having to reset the styling, but it still seems like the best way of getting table cells to stack 😞
Cool I see your code working fine, so it seems to be some of my other styles making it not stack on first (Pixel Gmail - Android 6, 7, and 8) and now Samsung Mail Android 7 (Email on Acid). I will dig more into it tomorrow, and come back ;-)
I just found out Email on Acid -> Samsung Mail Android 7 is not renderig (in some cases) correct. When I use Litmus the same client render stacking ok.
Should we close this issue? I "smells like" acorn 1.2 soon :D
Let's keep it open until we fix the issue, I'll need to run a lot of render tests with the new markup before releasing 1.2