Community Forum

Over the years we have built up a community of email marketers, coders and designers that live and breathe email.

Use the Email on Acid Forum like your virtual water cooler: Stop by to discuss email code, quirky clients and fixes and post your issues (with an example of the code) for our community to offer its assistance.

 
   
Right side gets cut off, iOS Mail only

sworder

Newbie
Total Posts:  2
Posted: 03 March 2017 02:05 PM

Hi,

I’ve coded an app that sends out periodic account updates to my users.

It works well on all desktop email clients. According to EoA it also displays properly on Android phones (all known email clients), iPads (all email clients), and GMail client on iOS. I’m only having problems with a single email client: The Mail app that’s bundled with the iPhone. On iPad there’s no problem.

See attached file ‘crappy.png’. This is how the email displays on iPhone’s mail app. It’s weird. It’s like that first paragraph ‘About this Email’ and the blue paragraph are hitting an invisible wall on the right edge. If I hold the iPhone in landscape position, everything looks great. If I then return to portrait position, the problem goes away. See attached file ‘better.png’ when I view in portrait mode a second time. Everything looks great!

I also attached ‘html.txt’ which is the raw code for the email that my app generates.

Any ideas what’s going on here?

P.S. I couldn’t figure out how to workaround the dimension limits on ‘crappy.png’ and ‘better.png’ so I uploaded as archive.zip instead.

File Attachments
Archive.zip  (File Size: 603KB - Downloads: 55)

 

marjoleinverheij

Avatar
Jr. Member
Total Posts:  31
Posted: 05 April 2017 12:17 AM
[ # 1 ]

The problem are the tables ‘snapshot: removed’ and ‘snapshot: removed managers’.
Those are so wide they would never fit on a mobile screen.

Also, this code is incorrect:

<style style=“box-sizing: border-box;”></style>

It should be:
<style type=“text/css” media=“screen”>
*, *::before, *::after {
  box-sizing: border-box;
}
</style>

You’re also using divs instead of tables (which is preferred for emails) and you miss reset styles. So what you’re seeing in your mail app now, is the best it can render without completely rebuilding your code.

Cheers,
Marjolein


 

sworder

Newbie
Total Posts:  2
Posted: 05 April 2017 12:55 AM
[ # 2 ]

Thanks, much appreciated.