How To Work Responsive Email
I did a post about this yesterday. With the help of one answer, I learned the good structure for an email newsletter. I applied those on my email newsletter. I also added media que
Solution 1:
Trying to make a responsive email is pretty much still a waste of time and effort due to the amount of email clients which will ignore and/or strip out your code.
HTML emails should basically be coded like it is 1999 with tables, images, some basic inline styles etc.
If it must be responsive try just removing the width from your tables and allowing them to be naturally responsive.
Here's a good resource on tips for HTML emails:
Solution 2:
In the answer I posted the other day (the deleted dupe), pretty sure I linked you to this basic responsive example.
You haven't applied the display:block; toggle. Your email section should look like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
<style type="text/css">
@media only screen and (max-width: 600px) { .switch { width:100%; display:block; } }
</style>
</head>
<body>
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50%" class="switch">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50%" valign="top" style="padding:30px;" bgcolor="#333333">
Cell 1
</td>
<td width="50%" valign="top" style="padding:30px;" bgcolor="#444444">
Cell 2
</td>
</tr>
</table>
</td>
<td width="50%" class="switch">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50%" valign="top" style="padding:30px;" bgcolor="#555555">
Cell 3
</td>
<td width="50%" valign="top" style="padding:30px;" bgcolor="#666666">
Cell 4
</td>
</tr>
</table>
</td>
</tr>
</table>
</body></html>
Post a Comment for "How To Work Responsive Email"