Create a Discussion

How to prevent phones from changing font color for dates?

Amar Malde posted 2016-01-12 04:02:59

I am designing email invites and using Get Response for my email campaign.

I have dates on my invite, and when the invite is viewed on an iPhone, the font colour of the linked dates is changing to white colour and it can't be seen as my background is also white.

Any coding help to stop the font colour of the dates from changing?

Any help would be greatly appreciated.

Cheers

Jeffrey Hoffman replied 2016-02-04 15:21:03

Are you trying to fix the styling of the dates (e.g. recipient should still be able to tap them) or do you want to prevent them from being detected as dates entirely? If you want to make it so that iPhone, Gmail and other email clients don't convert your dates into links, the simplest way is to use zero-width whitespace. As the name implies, it has zero-width so it is invisible but it thwarts date detection -- and a whole host of other things like phone numbers.

Just insert a #8203; character anywhere within your date and PRESTO, problem solved.

March#8203; 23, 2015 produces March 23, 2015 sans unexpected links or styling.

Reply to Jeffrey Hoffman

Peter P replied 2016-02-05 17:54:09

Try using non-braking spaces ( &nbsp ; ) and / or &ndash ; within the phone number that should throw off the detection.
for the date use &#47 ; for the /
(sorry added spaces to make the HTML codes visible as codes not symbols) should be &#XX; or &Foo; not &FOO ;

Reply to Peter P

Christine Seabo replied 2016-01-13 14:02:10

<style>
a[x-apple-data-detectors] {
    color: inherit !important;
    text-decoration: none !important;
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}</style>

Reply to Christine Seabo

-1

jeanette aspinall replied 2016-01-12 09:32:40

In the header just use this line of code:

<meta name="format-detection" content="date=no">

Also, you can add more extra lines replace 'date' with 'telephone', 'email', and 'address' to prevent iPhone and to autoformat them.

Reply to jeanette aspinall

Amar Malde replied 2016-01-12 11:01:12

Hi Jeanette, thanks for responding. I can't seem to fix this. The current coding I have for the particular section is:

 <td class="width10" width="60" style="color: #778598;text-decoration: none;font-size: 14px;line-height: 1.1;"><img src="https://gallery.mailchimp.com/b02ec12dc0106faf178684d32/images/49592146-6628-45d6-952c-27aaf0b4979a.gif" alt="blank" width="1" height="1" style="border: none;outline: none;text-decoration: none;display: inline-block;max-width: 100%;"></td>

                              <td id="invitationText" class="font12" style="font-family: 'Montserrat', sans-serif;font-size: 14px;color: #898989;text-align: center;line-height: 1.6;text-decoration: none;"><p style="margin: 0;padding: 0;">As Amar and Shilna begin the journey of a lifetime, we invite you to share in this adventure and celebrate with us at the magnificent<br>

Naivasha Simba Lodge, Kenya.</p>

<p style="margin: 0;padding: 0;"><br>

This idyllic setting by the lake is nestled amongst the beauty of Mount Longonot. Wildlife abounds in this spectacular country<br>

landscape with cool mountain breezes.</p>

<p style="margin: 0;padding: 0;"><br>

Wedding festivities will begin on<br>

Friday 12<sup>th</sup> August 2016, as per below.</p>

</td>

Basically, the "Friday 12th August 2016" is displaying fine on email but when viewed on iPhone mail, it shows in white colour (and my background is also white) so it cannot be seen on the iPhone.

I would really appreciate your help in fixing this problem.

Lucy Douglas replied 2016-01-12 12:52:21

Try this in the CSS in the head of the email:

a[href^="x-apple-data-detectors:"] {
    color: inherit;
    text-decoration: inherit;
}

Are you able to share your HTML head copy?

Amar Malde replied 2016-01-12 13:53:38

Hi Edward, what is headcopy? Are you able to send me your email and I can email the whole coding to you?

Lucy Douglas replied 2016-01-12 14:56:48

Hi Amar - this is the text in between the <head></head> tags.

How to prevent phones from changing font color for dates?

Sign in to Community

Join the Litmus Community

Sign up to Community

Get more out of your Litmus account

Forgot password