- 7 views
Add the following lines to your <head> of the email template:
<meta name="x-apple-disable-message-reformatting">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
For some incredible stupid reason, if you do not have Doctype specified above your email template, IOS if fails to recognise @media queries. So add the following line above your HTML email template:
<!DOCTYPE html>
Note: @media queries work ONLY if you have your doctype in exactly the format above, it does not work if you have some other attributes there! (Yes, it is THAT stupid)
It took me several hours of debugging, sending emails, waiting for email client to notice the email and after each change just spending incredible amounts of time to this, or rather I stumbled upon this thread.
IOS is so stupid, display: block or basicly any styling does not work on <td> elements (from which tables are consisted, right? And we are still doing email templates like it's '90s, table layouts), and you need to
Replace all <TD> elements with <TH> elements
and your CSS will magicly work. @media queries AND inline-css styles DO NOT work on <TD> elements.
Why?
Because IOS / Safari is the new Internet Explorer!
[Yes, this was rant, but imagine spending so many hours on something that stupid]