Content #1687
open
Update Email Templates for Responsiveness, Alignment, and Styling via html
Added by Maruf Parves about 1 year ago.
Updated about 1 year ago.
Due date:
01/15/2025 (about 15 months late)
Description
We need to update our email templates to ensure they are responsive, centered, and properly styled across all devices (mobile, tablet, and PC). This includes:
- Centering the email content within a visible border.
- Making the email templates responsive so they display correctly on all devices.
- Adding a centered button (if applicable) and ensuring all text is properly aligned.
- Ensuring the "Click here to stop receiving email from us" text is centered.
- % Done changed from 0 to 90
As the existing emails were looking a bit on desktop view. as everything was left aligned. I tried to use a html code which can make the existing email have side borders, while keeping the body as it is. Also ensured that the button and the " click here to stop receiving email from us" text was middle aligned as well. Solution is very simple. We just have to put a before and after code on each emails code section.
here is the before code which shall be placed at the very first:
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="center">
<!-- Centered Container with Border -->
<table class="email-container" width="600" cellspacing="0" cellpadding="0" border="0" style="max-width: 600px; width: 100%; margin: 0 auto; border: 1px solid #ddd;">
<tr>
<td align="left" style="padding: 20px; font-family: Tahoma, Geneva, sans-serif; color: #333333;">
<!-- Your Existing Content Will Start Here -->
and here is the after code which shall be placed at the bottom:
<!-- Your Existing Content Will End Here -->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Style Existing Unsubscribe Text -->
<style>
/* Target the existing unsubscribe link */
a[href*="UNSUBSCRIBE_INSTANTLY.ai"] {
display: block;
text-align: center;
font-size: 12px !important;
color: #B8312F !important;
text-decoration: none !important;
margin: 20px 0;
}
</style>
- Due date set to 01/15/2025
- Estimated time set to 2:00 h
for the button allignment in the middle I have updated the
with centered table structure. bacause even though wrapped in
and text center alligned, email cleints like gmail doesnt support them.
so,
instead of:
<div style="margin: 10px 0; text-align: center; display: flex; flex-direction: column; align-items: center;">
<a href="
[ Button content]
</a>
</div>
I have updated it with:
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="center" style="padding: 10px 0;">
<a href="
[button content]
</a>
</td>
</tr>
</table>
- Estimated time changed from 2:00 h to 3:00 h
- Estimated time changed from 3:00 h to 5:00 h
- % Done changed from 90 to 100
Also available in: Atom
PDF