TD stacking not working on Outlook app in IOS

If you just want the answer to fixing this issue, go down to “The Solution” section.
(Hint: replace <td> with <th>)

A common technique for making a multi-column desktop layout magically transform to a one-column layout for mobile is to stack the table columns by changing the TD display to “block” in a media query. You are changing a table cell into a block-level element, like a DIV or P.

The following code is an example of how that happens. The styles below will only be applied to screens that are 500px wide or smaller, meaning most cell phones. The “stack_mobile” class is applied to all the <TD> elements we want to stack.

@media only screen and (max-width: 500px) {
  td[class="stack_mobile"] {
    display: block !important;
    width: 100% !important;
  }
}

This works on all devices that recognize media queries, or so I thought. For some reason we were not checking Litmus results for the Outlook app. I really started paying attention to the Outlook app results when I started using the app myself a while back. The problem was that I am on an Android phone, and although there were some Outlook app specific issues I caught by looking at my phone, I had never looked at any results for the Outlook app on iPhones, which was pretty amazing as most people that were proofing the emails, had iPhones, but not sure if any were using the Outlook app, so my/our bad.

I immediately added the Outlook app for IOS to my Litmus results, and dang it if my Responsive, Adaptive, or whatever you want to call them, emails were not looking jacked up on the Outlook app for IOS.

The problem wasn’t just that they didn’t stack, but also that the medial query was being applied to SOME things, but not all, so I was not seeing my columns stack, but I wasn’t seeing the desktop version either. This was because the app did recognize the query, but it just didn’t apply “display:block” to my TDs.

The Solution

As of this writing, the fix seems to be to replace your <td> with <th> within your code. I have not found that using <th> causes any issues in other clients, but I wouldn’t be surprised if the next version of Outlook strips them out, or does something ridiculous, as they are known to do in their “updates”.

It's only fair to share...Tweet about this on Twitter
Twitter
Share on Facebook
Facebook
Email this to someone
email
Share on Google+
Google+
This entry was posted in Email Dev, Mobile and tagged , , , . Bookmark the permalink.