-
Star
(187)
You must be signed in to star a gist -
Fork
(48)
You must be signed in to fork a gist
-
-
Save tinabeans/6996367 to your computer and use it in GitHub Desktop.
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
| <title>Single-Column Responsive Email Template</title> | |
| <style> | |
| @media only screen and (min-device-width: 541px) { | |
| .content { | |
| width: 540px !important; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!--[if (gte mso 9)|(IE)]> | |
| <table width="540" align="center" cellpadding="0" cellspacing="0" border="0"> | |
| <tr> | |
| <td> | |
| <![endif]--> | |
| <table class="content" align="center" cellpadding="0" cellspacing="0" border="0" style="width: 100%; max-width: 540px;"> | |
| <tr> | |
| <td> | |
| [PUT EMAIL CONTENT HERE] | |
| </td> | |
| </tr> | |
| </table> | |
| <!--[if (gte mso 9)|(IE)]> | |
| </td> | |
| </tr> | |
| </table> | |
| <![endif]--> | |
| </body> | |
| </html> |
Did you see issues when testing with Litmus for Windows Phone 7.5? In my tests, even of just the base template, the conditional comments are visible. https://litmus.com/pub/99ffa14/screenshots
I only have a Windows Phone 7.8 device that I test with, and on that I can't see the comments, so I'm not sure if this is a real bug or a Litmus bug. Anyone have any ideas?
The solution given for Outlook doesn't work for me... :(
Am I allowed to say f'ing awesome! Thanks so much!
Thank you! Very helpful.
Rockstar!
I'm a little new to editing html emails. So, I take your template, put everything I need where it says [PUT EMAIL CONTENT HERE] including all the CSS I need as inline CSS?
I had no idea @tinabeans made this. This file has been in my projects for almost a year.
Original post explaining the code is gone. You can find it on the wayback machine.
This is awesome, I love your work! The only thing I would add is that Outlook.com (when not being used on IE) will not respect the min-device-width media query alone, it would also need min-width. When being used on IE I presume it's picking up on the conditional code and being restricted to 540px, when on Chrome or other browsers, the email is displaying at 100% wide. I simply changed the line to this and it fixed the problem for me in all my tests:
@media only screen and (min-device-width: 541px), screen and (min-width: 541px) {}
But great work on putting this together! I have been meaning to try a fluid approach for a very long time and you've worked out a great way to do it.