Vote count:
0
I'm making an email newsletter. I've tried to make this with good coding practice for newsletter. That's why, I haven't use any div even internal css style for making sure that it'll work at all email clients. But, now I'm facing an issue. I've to make this email responsive. The main structure of my email is one column. But inside this at one section, there are four columns. I need at mobile device there will be two column instead of that four columns. So, one row with four columns switch into two row with two columns. In short: This is the link of my sample desktop version and This is the link of my sample mobile version
(1) Basically, I ain't good at table. I'm good at div. If I had use div everywhere, I can change that layout for mobile device. But, now I can't understand how to manage it for table structure while normally all the 4 columns are in one row. I don't understand how can I turn this into 2 row and 2 column for mobile device.
(2) Besides this, while writing media query should I've to write this meta tag or this is not supported at email newsletter:
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />
Code:
<body>
<table border="0" cellspacing="0" cellpadding="0" style="margin: 0px auto; font-family: Helvetica, Arial, sans-serif; width:640px; padding: 35px 0 0;">
<tr>
<td colspan="4" style="font-size: 25px;">
LOGO
</td>
</tr>
<tr>
<td align="center" valign="top" style="padding: 15px 0 15px; width: 160px; height: 150px; border-right: 1px solid #666;">
<p style="margin: 0; padding: 5px 0 10px;">Remaining</p>
<p style="font-size: 35px; margin: 0 0 20px;">12d, 17hr</p>
<a style="background: #ccc; color: #000; font-weight: bold; text-decoration: none; padding: 5px 10px;" href="#">Visit</a>
</td>
<td align="center" valign="top" style="padding: 15px 0 15px; width: 160px; height: 150px; border-right: 1px solid #666;">
<p style="margin: 0; padding: 5px 0 10px;">Remaining</p>
<p style="font-size: 35px; margin: 0 0 20px;">12d, 17hr</p>
<a style="background: #ccc; color: #000; font-weight: bold; text-decoration: none; padding: 5px 10px;" href="#">Visit</a>
</td>
<td align="center" valign="top" style="padding: 15px 0 15px; width: 160px; height: 150px; border-right: 1px solid #666;">
<p style="margin: 0; padding: 5px 0 10px;">Remaining</p>
<p style="font-size: 35px; margin: 0 0 20px;">12d, 17hr</p>
<a style="background: #ccc; color: #000; font-weight: bold; text-decoration: none; padding: 5px 10px;" href="#">Visit</a>
</td>
<td align="center" valign="top" style="padding: 15px 0 15px; width: 160px; height: 150px;">
<p style="margin: 0; padding: 5px 0 10px;">Remaining</p>
<p style="font-size: 35px; margin: 0 0 20px;">12d, 17hr</p>
<a style="background: #ccc; color: #000; font-weight: bold; text-decoration: none; padding: 5px 10px;" href="#">Visit</a>
</td>
</tr>
<tr>
<td colspan="4">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</td>
</tr>
<tr>
<td colspan="4">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</td>
</tr>
<tr>
<td colspan="4">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</td>
</tr>
</table>
</body>
Aucun commentaire:
Enregistrer un commentaire