iPhone 11 default Mail app is ignoring display: block on table cells?

[RSmallwood]

We are using the drag/drop email editor to create a template. It has a Module Group that consists of an image on the left, and a Module Group to the right that contains a few rich text and image elements. On mobile, the items are supposed to stack, like so:

This worked fine on all devices up until a couple of weeks ago, when users on iPhone 11, using the default Mail app, reported that the items were not stacking properly (reported by multiple people, all on iPhone 11, all in the Mail app). This is what they're seeing:

I tested on various iPhones, iPads, etc. that I had at my disposal, and could not duplicate the issue (I don't have an iPhone 11, though). I tested on Litmus, and it showed no issues with iPhone 11. I even created a simplified version of the email to make sure it wasn't something in our template, and still, items will not stack properly on iPhone 11 when in a Module Group.

I confirmed that the Mail app is reading/using media queries by doing a simple test:

@media only screen and (max-width: 640px) {
      table td { background-color: blue; }
}

And the email was blue - so great. Then I dug around in the Hubspot media queries to figure out where/how it does the stacking for tables, and found this:

@media only screen and (max-width: 480px) {

      td.column {
          display: block !important;
          width: 100% !important;
          padding-top: 0 !important;
          padding-right: 0 !important;
          padding-bottom: 0 !important;
          padding-left: 0 !important;
      }

}

 So clearly the CSS is there and supposed to be working, and yet on iPhone 11, it's not. I tried copying that piece of CSS into the media query I was testing with:

@media only screen and (max-width: 640px) {
      table td { background-color: blue; }

      td.column {
          display: block !important;
          width: 100% !important;
          padding-top: 0 !important;
          padding-right: 0 !important;
          padding-bottom: 0 !important;
          padding-left: 0 !important;
      }
}

And again, no change.

Anyone got any ideas? Again, this was working fine as of a few weeks ago; my tests with a super-simplified version didn't work on iPhone 11 despite looking fine on every other device tested on, so this is starting to feel like an issue with either Hubspot or iPhone 11. Am open to any suggestions of things to test or try...

[RSmallwood]

Also, @Kevin-C thanks for any help...

[RSmallwood]

Okay, so I just ran a very simple test - created a simple drag+drop email that has a Module Group with an image on the left, and text on the right. I did no custom CSS or any other changes.

Here's how it looks in the default Mail app on iPhone 11 (not stacking properly):

And here's how it looks in Outlook on the same device (is stacking properly):

These are the same emails, same device, different apps. Again, no custom CSS or code - this is all Hubspot's CSS, etc.

So, I guess I'm wondering why the appearance is so different between the two apps on the same device (given that it's the same HTML & CSS) - I get that there are differences between mail clients, etc. and we have to make adjustments when dealing with complicated layouts, but this is about as basic as a layout can get. Is this the expected/desired behavior in regard to Hubspot's mobile/responsive code for the default Mail app? Or have I found a bug? (I can tell you, the mobile responsiveness did work fine in the default Mail app as of 3 weeks ago).

[MiaSrebrnjak]

That's interesting @RSmallwood, thank you for providing details and screenshots! Because the emails seem to be displayed normally in all other email clients, this could be a configuration issue in the iPhone 11 default mail app. I would recommend to enable the web version of your marketing email, so the readers can check the web version if the email is not displayed correctly on mobile.  

I would also recommend to reach out to our Support with the information you provided above, who can have a deeper look at the email in your HubSpot account. Please note that HubSpot is observing a global week of rest next week, which could affect the ticket response time. 

Thank you!

Mia

[Kevin-C]

Thanks @MiaSrebrnjak 

Hey @RSmallwood could you provide a preview link to a live email that is known to have this issue?

Using safari we can emulate the iphone relatively well.

After reviewing this documentation, it looks like the iphone 11 is 828px wide. So the "max-width: 640px" and "max-width: 480px", which target the defined widths and below will not effect the layout on the iphone, css reference.

TLDR

I'd suggest testing out the 828px width!

[RSmallwood]

I had the same thought, Kevin, about the pixel width, but that's specifically why I ran the "background-color: blue;" test under a 640px media query/breakpoint, and can definitely confirm that the user's iPhone 11 was showing the background as blue, so clearly the iPhone 11 is being targeted at that width. I also tried several recommended media queries to specifically target the iPhone 11 (all of which were targeting retina screens), and none of them worked, oddly enough. Finally, I had the client go to one of those "what is my screen size" sites which specifically said the pixel width is 414px.

I plan to do one more test with the client today which will be just a simple two column Module Group and nothing else. Will report back my findings along with a link to the testable preview link.

[MiaSrebrnjak]

Hi @RSmallwood,

Thank you for reaching out to the Community! 

It's definitely curious that the stacking issue only occurs in the default Mail app on iPhone11. I wanted to share this external resource with a couple of solutions for common rendering issues in the iPhone Mail app. 

I also wanted to send you this Community article where @Kevin-C shares helpful tips. 

@Kevin-C do you maybe have an idea why emails aren't displayed correctly in this case? Thank you! 

Mia