CODEWITHSUNDEEP
cssmobilehtml-email
Cory Dobson
Cory Dobson

Reputation: 73

mobile css not working for html email

I'm creating what I would have thought to be a simple html email signature. The design is not complex, but on the iPhone mail app it breaks.

This is what it is supposed to look like: http://entecinc.com/email-signature/index-inline.html and it works in desktop email clients that I've tested.

I've tried -webkit-text-size-adjust: none; applied inline to all elements, but for whatever reason that doesn't seem to work.

I've also tried display:none !important; to all elements wrapped around the image, including the image, though it still shows up in the email.

Is there a certain way I should be applying these mobile CSS rules differently than how I am doing it?

Not sure if this is relevant, but I'm testing sending out of Outlook, to a gmail account opened in apple mail on an iPhone 4.

Upvotes: 0

Views: 2570

Answers (2)

R Lacorne
R Lacorne

Reputation: 604

What you need to know, first and foremost, is that Gmail will always completely remove your CSS styles from your emails. It'll only understand precise INLINE stylings, and even then, it has some problems with certain conditions.

Ex:

1- Black links are not allowed, you need to use #000001, or Gmail will render those as blue.

2- Gmail will add white spaces around ANY image unless you specify that they are displayed as block elements. display:block;

3- Redundant text in message conversations will be rendered as purple unless you, again, specify that the text has #000001 for it's color.

4- Gmail will completely scrap the Head element of your email, so you can't specify styles this way.

5- Gmail cannot, for now, be considered "responsive". From what I tested, Outlook.com and Apple Mail are the only mail clients that gracefully display mobile styles in emails.

Upvotes: 2

Eddie A.
Eddie A.

Reputation: 111

Can you describe what is actually "breaking" or attach a screenshot from the phone (press home button and on off button at the same time). I have experience in mobile email optimization and I'm sure I'll be able to answer your question if i could understand what is actually getting messed up. I'll try to send your code form outlook to my phone, but I have an iPhone running ios7, it may look just fine.

EDIT: Without actually testing your code I see that your media query was incorrect.

You have: @media only screen and (max-device-width: 480px)

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

I'm not sure if this is all you needed, but it worked in the browser when I resized the window.

EDIT:

Here's how it looked on my phone sent as a signature from Mac Outlook 2011 to a gmail account using Apple Mail. The signature was added not with code, but by copying the the browser page in Chrome and pasting into the signature editor.

http://dolf.co/FILES/screenshots/IMG_0702.PNG

Upvotes: 1

Related Questions