Html email looking different in Gmail app

前端未结

关注

 1  1602

I\'m not really used to making html emails. Of course I have to start out making a responsive one in basically two versions of the same email. When I thought I had it done f

相关标签:

1条回答

独厮守ぢ

2020-12-22 06:27

When you use align="left" on the tables, it is like floating left in CSS. This is what Gmail is doing, it is floating your text table, causing it to overflow (pop down) below your image table.

If you want your text within the tables to align, put it in the <td> within those tables instead.

Update:

For responsive in html email, try using the display:block; toggle technique:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
  <style type="text/css">
    @media only screen and (max-width: 600px) { .switch { width:100%; display:block; } }
  </style>
</head>
<body>

  <table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td class="switch" width="50%">
         <img alt="" src="http://placehold.it/150x150" width="100%" style="margin: 0; border: 0; padding: 0; display: block;">
      </td>
      <td class="switch" width="50%" valign="top" style="padding:30px;">
        Text here...
      </td>
    </tr>
  </table>

</body></html>

This will be ignored by Gmail as it strips the style tag, leaving the default non-responsive layout.

0 讨论(0)