This message has been modified to fit your screen. Tap here to show original

Question

I made fixed email template. But When I trying to test it on mobile devices in gmail (and it is happening only in gmail) it is break my layout (looks like it make my layout to fit device width like in responsive emails). There is a message : "This message has been modified to fit your screen. Tap here to show original". After tap it looks perfect without any defects. Is there any method to prevent this and show the original email at the beggining?

Answer 1

Found the answer. Maybe it helps someone. To show original layout need to add to the end of the email this code.

<tr>
<div style="display:none; white-space:nowrap; font:15px courier; line-height:0;">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
</div>
</tr>

The white-space:nowrap with the dashed line creates a line about 500px across that when bumped up in size will exceed 700px causing the Gmail to not apply the font change.

The display:none style causes non-Gmail clients to hide the block (Gmail ignores display:none). When the email is viewed in say, a non-Gmail mobile client, it won’t affect responsive layout.

Answer 2

if you are looking to remove the resizing of the email and keep it at the defined (non-responsive scale) add <meta name="viewport" content="width=device-width, initial-scale=1"/> to your email and it should prevent the resizing.

If you are looking at trying to have it use media queries, etc. this cannot happen as gmail app completely strips the style tags, you would have to build as a hybrid and start with Gmail App first.

Answer 3

put inline styles on an element that spans the full width of the template. ex: <td style="min-width:600px;"></td>. That keeps GMail's auto-resize 'feature' from messing with the rest of the layout.