Help! Why is my moblie email staggered


#1

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?


#2

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?


#3
<!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>&nbsp;&nbsp;&nbsp;&nbsp;<a href="*|UNSUB|*" style="color:#404040 !important;">unsubscribe from this list</a>&nbsp;&nbsp;&nbsp;&nbsp;<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>

#4

What client are you seeing problems with? I’m not sure that all email clients understand @media rules.


#5

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.


#6

I’m wondering if there’s something I place in the code to cause this


#7

Nothing much at all will understand them with no viewport meta tag.


#8

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.


#9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.