1

I have created a few HTML emails using Foundation for Emails. I am seeing a strange behavior in the iOS Mail app consistently with every email I create. The preview text has a line break in it for some reason. Here's what I mean:

enter image description here

Instead of showing the entire preview text as a continuous string, it's putting "Thanks" on it's own line.

This is the code for the preview text:

<span class="preheader" style="color:#f3f3f3;display:none!important;font-size:1px;line-height:1px;max-height:0;max-width:0;mso-hide:all!important;opacity:0;overflow:hidden;visibility:hidden">Thanks for your order! Your order number is 1538. Please save this order confirmation email for your records.</span>

I can't figure out why the preview text is displaying this way. Does anyone have any clue?

Even if I remove the preview text completely, the preview still displays with a line break. For example, if the .preheader section is empty, then iOS displays the preview text as:

Thanks
For Your...

I am very confused. Does anyone have any idea what could be causing this?

One other thing that might be relevant, besides the styles on the .preheader tag, there is also these styles on the body, which is the parent of the .preheader tag.

-moz-box-sizing:border-box;-ms-text-size-adjust:100%;-webkit-box-sizing:border-box;-webkit-text-size-adjust:100%;Margin:0;box-sizing:border-box;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.3;margin:0;min-width:100%;padding:0;text-align:left;width:100%!important
flyingL123
  • 7,686
  • 11
  • 66
  • 135
  • Can anyone help me with this? It's very frustrating and I don't see anything I have done that would cause it. I'm basically just using foundation for email out of the box. It's happening consistently with every message I generate using the framework. Has anyone else seen this behavior? – flyingL123 Nov 09 '17 at 23:34

1 Answers1

1

The emails are being sent through BigCommerce. It's an issue with how BigCommerce encodes their emails. BigCommerce adds linebreaks to limit line length, but not properly using 'quoted-printable' encoding to ensure continuous lines remain continuous. Frustrating, but at least there is an explanation. I sent them an explanation so we'll see if it ever gets fixed.

scoopzilla
  • 887
  • 5
  • 15
flyingL123
  • 7,686
  • 11
  • 66
  • 135