I’m new to HTML and made a responsive email from scratch, however, when viewing on mobile it’s not stacked evenly. Can anyone help?
Welcome to the forum, @zenadiam. In order for anybody to help you here, we would have to see your code. Could you please post what you have so far?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Responsive Email Template</title>
<style type="text/css">
@media only screen and (max-width: 640px) {
body[yahoo] .deviceWidth {
width:300px !important;
padding:0;
}
body[yahoo] .center {
text-align:center !important;
}
}
@media only screen and (max-width: 479px) {
body[yahoo] .deviceWidth {
width:300px !important;
padding:0;
}
body[yahoo] .center {
text-align:center !important;
}
}
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" yahoo="fix" style="font-family:Verdana, Geneva, sans-serif">
<!-- Wrapper -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="100%" valign="top" bgcolor="#ffffff" style="padding-top:20px;">
<!--header-->
<table width="600" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
<tr>
<td width="100%" bgcolor="#f4f4f4">
<!-- Logo -->
<table border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
<tr>
<td class="center"><img src="https://gallery.mailchimp.com/6e0e791e62722ea6c9a62a1be/images/fe6ba2d1-9f91-4e6b-8ba5-89cd1e7003b2.gif" alt="zen" width="300" height="100" style="display:block">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--end header-->
<!--2-to-1 col-->
<!--hero-->
<table width="600" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="#FFFFFF">
<tr>
<td class="center">
<table border="0" cellpadding="0" cellspacing="0" align="left" class="deviceWidth">
<tr>
<td align="center">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><a href="https://www.linkedin.com/in/zenadia-martin-1a569323/" target="-blank"><img class="deviceWidth" src="https://gallery.mailchimp.com/6e0e791e62722ea6c9a62a1be/images/9100157e-01d3-41c8-8ddf-63092a93dfa9.gif" width="300" height="298" style="display:block" alt="9100157e-01d3-41c8-8ddf-63092a93dfa9.gif"></a>
</p>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" align="left" class="deviceWidth">
<tr>
<td align="center">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><img class="deviceWidth" src="https://gallery.mailchimp.com/6e0e791e62722ea6c9a62a1be/images/862c12ba-75d3-49a2-a823-4e42e442af18.gif" width="300" height="298" style="display:block" alt="862c12ba-75d3-49a2-a823-4e42e442af18.gif">
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="deviceWidth">
<tr>
<td width="600" align="center" bgcolor="#f4f4f4">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><img class="deviceWidth" src="https://gallery.mailchimp.com/6e0e791e62722ea6c9a62a1be/images/c8b4968c-ef80-48ae-af3c-ccb4eaa11ec4.gif" width="300" height="300" alt="Introduction">
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--end hero-->
<!--secondary-->
<!--end secondary-->
<!--pod shell-->
<table width="600" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="#FFFFFF">
<tr>
<td class="center" style="padding-top:0px;padding-bottom:0px;">
<!--pod1-->
<table border="0" cellpadding="0" cellspacing="0" align="left" class="deviceWidth">
<tr>
<td align="center">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><img class="deviceWidth" src="https://gallery.mailchimp.com/6e0e791e62722ea6c9a62a1be/images/e7b8a558-7388-4aa6-a883-3f142b3421f7.gif" width="300" height="300" style="display:block" alt="e7b8a558-7388-4aa6-a883-3f142b3421f7.gif">
</p>
</td>
</tr>
</table>
<!--pod2-->
<table border="0" cellpadding="0" cellspacing="0" align="right" class="deviceWidth">
<tr>
<td align="center">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><img class="deviceWidth" src="https://gallery.mailchimp.com/6e0e791e62722ea6c9a62a1be/images/acd30f66-a953-49b8-b843-55f5db7c6cd5.gif" width="300" height="300" style="display:block" alt="acd30f66-a953-49b8-b843-55f5db7c6cd5.gif">
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<center>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="canspamBarWrapper" style="background-color:#FFFFFF; border-top:1px solid #E5E5E5;">
<tr>
<td align="center" valign="top" style="padding-top:20px; padding-bottom:20px;">
<table border="0" cellpadding="0" cellspacing="0" id="canspamBar">
<tr>
<td align="center" valign="top" style="color:#606060; font-family:Helvetica, Arial, sans-serif; font-size:11px; line-height:150%; padding-right:20px; padding-bottom:5px; padding-left:20px; text-align:center;">
This email was sent to <a href="mailto:*|EMAIL|*" target="_blank" style="color:#404040 !important;">*|EMAIL|*</a>
<br/>
<a href="*|ABOUT_LIST|*" target="_blank" style="color:#404040 !important;"><em>why did I get this?</em></a> <a href="*|UNSUB|*" style="color:#404040 !important;">unsubscribe from this list</a> <a href="*|UPDATE_PROFILE|*" style="color:#404040 !important;">update subscription preferences</a>
<br/>
*|LIST:ADDRESSLINE|*
<br/>
<br/>
*|REWARDS|*
</td>
</tr>
</table>
</td>
</tr>
</table>
<style type="text/css">
@media only screen and (max-width: 480px){
table#canspamBar td{font-size:14px !important;}
table#canspamBar td a{display:block !important; margin-top:10px !important;}
}
</style>
</center></body>
</html>
What client are you seeing problems with? I’m not sure that all email clients understand @media rules.
Once the email is sent through my gmail account or mail chimp and viewed on mobile it is stacked unevenly, I want it to be aligned evenly.
I’m wondering if there’s something I place in the code to cause this
Nothing much at all will understand them with no viewport meta tag.
1 Like
If you are talking about ios email clients then it probably relates to this bug.
https://bugs.webkit.org/show_bug.cgi?id=38527
Use the html5 doctype and try using th elements instead of td. I don’t have the means to test at the moment so it may not work everywhere.
I used to avoid stacking table cells together for email because of this problem but would rather use two table elements instead.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.