Skip to content Skip to sidebar Skip to footer
Home / Android / Css / Gmail / Html Email / Responsive Design

Html Email Looking Different In Gmail App

Post a Comment
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 for most

Solution 1:

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.


Post a Comment for "Html Email Looking Different In Gmail App"