Outlook App on iOS Not Displaying Images

Here’s a link to a discussion on Litmus about images not displaying in the Outlook app on iOS. I’m having this same issue. The images do show up the second time you open the email, which is very frustrating.

I have not tried removing “display block” yet, but the other fixes did not work for me.

Outlook App on iOS Not Displaying Images
https://litmus.com/community/discussions/5144-outlook-app-on-ios-not-displaying-images

Thank you for reading!

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”.

Thank you for reading!

Email: Weird border showing up around TD on mobile devices

Weird border showing up around TD on mobile devices. It was either a border or a 1px space showing up around table cells. It was only mobile devices. I was seeing it on iPads and my Android phone.

 

The table cells had a background color assigned, as the container table had a different background color. The fix was to eliminate the background color on the table cell, but since the container had a different background color than the color these particular table cells needed, I created a new table just for this section. I stacked It under the existing table.

Thank you for reading!