Yesterday, I posted about my email newsletter and received some helpful feedback on creating a good structure. I implemented the suggestions provided into my newsletter and also added media query code to make layout adjustments for supported email clients. However, I encountered an issue as the media queries did not work as expected in my email newsletter. If you would like to see the visual representation of the desktop version email, and the mobile version email. The main difference between the two versions is visible in the four columns section.
- In the mobile version, there should be two columns instead of four.
- The last two columns need to be positioned below the first two columns with spacing from the top to ensure that the vertical borders do not touch.
- For desktop view, every column should have a right border except for the last one. In the mobile view, the second and fourth columns should not have a right border.
To achieve these layout changes, I structured my code in the following way:
- There are four columns below the logo, organized as two separate tables with two columns each. The parent table's width is set at 640 pixels, while the child tables' width is set at 320 pixels. The first child table aligns to the left so they are displayed side by side. To ensure proper display in mobile view, I adjusted the main table's width to 320 pixels so the child tables stack vertically.
- I added padding-top: 20px to the second child table in the mobile view to create space between it and the table above.
- For columns without a right-border property in the mobile view, I applied a specific class and set border: 0; for those columns.
In the head code:
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />
<title>Email</title>
<style>
@media only screen and (max-device-width: 480px) {
table[class="mainTable"] {
width: 320px !important;
}
table[class="subTable"] {
padding: 20px 0 0 !important;
}
td[class="noBorder"] {
border: 0 !important;
}
}
</style>
In the body code:
<table width="640" border="0" cellspacing="0" cellpadding="0" class="mainTable" style="margin: 0px auto; font-family: Helvetica, Arial, sans-serif; padding: 35px 0 0;">
<tr>
<td style="font-size: 25px;">
LOGO
</td>
</tr>
<tr>
<td>
<table align="left" width="320" border="0" cellspacing="0" cellpadding="0" style="margin: 0; padding: 0;">
<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" class="noBorder" 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>
</tr>
</table>
<table width="320" border="0" cellspacing="0" cellpadding="0" class="subTable" style="margin: 0; padding: 0;">
<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;">
<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>
</table>
</td>
</tr>
<tr>
<td>
<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>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</td>
</tr>
<tr>
<td>
<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>
Despite these efforts, the changes did not reflect correctly in the mobile view. Upon testing in the Android Gmail app, which may not fully support media query, and the Sony android default Email app which should support it, no significant change was observed. This lack of responsiveness warrants further investigation and testing across different devices. Unfortunately, I currently do not have access to other mobile devices for testing purposes.