Search code examples
htmlemailgmailhtml-email

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

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". Is there any method to prevent this and show the original email at the beginning?

message has been modified to fit screen

The very same question is already present at this link. But recently two or three days back gmail app is updated and this hack stopped working. Does anyone have any solution ?

Solution:

<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>
Solution

  • Please add the @class which has display:none property in media query for mobile native app.

     <div class="display-mobile" style="white-space:nowrap; font:15px courier; line-height:0;width:600px!important;">&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; &nbsp; &nbsp; &nbsp; &nbsp;</div>

    In media query add this property: 

    .display-mobile{display: none !important;}