How to avoid clipping in email clients

Question

I'm styling an invoice email. And the whole email clients rendering drives me crazy.

Is it possible to show whole content (minified) on a Gmail App Email client like in iOS ?

Right now the Gmail App Email is cutting the half of my email.

and the iOS is showing the content like a desktop version

Update: added source code (only a part of it)

<!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" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>Web Bestellung</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="x-apple-disable-message-reformatting" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">
    body, .maintable { height:100% !important; width:100% !important; margin:0; padding:0;}
    img, a img { border:0; outline:none; text-decoration:none;}
    p {margin-top:0; margin-right:0; margin-left:0; padding:0;}
    .ReadMsgBody {width:100%;}
    .ExternalClass {width:100%;}
    .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height:100%;}
    img {-ms-interpolation-mode: bicubic;}
    body, table, td, p, a, li, blockquote {-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%;}
</style>
<!-- <style type="text/css">
@media only screen and (max-width: 480px) {
 .rtable {width: 100% !important;}
 .rtable tr {height:auto !important; display: block;}
 .contenttd {max-width: 100% !important; display: block; width: auto !important;}
 .contenttd:after {content: ""; display: table; clear: both;}
 .hiddentds {display: none;}
 .imgtable, .imgtable table {max-width: 100% !important; height: auto; float: none; margin: 0 auto;}
 .imgtable.btnset td {display: inline-block;}
 .imgtable img {width: 100%; height: auto !important;display: block;}
 table {float: none;}
 .mobileHide {display: none !important;}
}
</style> -->
<!--[if gte mso 9]>
<xml>
  <o:OfficeDocumentSettings>
    <o:AllowPNG/>
    <o:PixelsPerInch>96</o:PixelsPerInch>
  </o:OfficeDocumentSettings>
</xml>
<![endif]-->
</head>

https://jsfiddle.net/5qpdk63h/

Hi Greg, this is most likely due to bloated code that us supplied by the system you're using to send these. Do you have access to amend the code at all? If so, can you post? No easy fix for any email client without seeing any code, so if you can supply the code, we can help debug — , Jul 23 '19 at 11:16
Hi, I added the source code + jsfiddle link to my question. This is the code that i have previously made with MailStyler2 and then made some changes in the source code. — Greg Ostry, Jul 23 '19 at 11:32
You can't avoid gmail clipping, you'll have to reduce your email code length. See https://emailmonks.com/blog/email-design/avoid-gmail-clipping/ for example to get some advices. — Veve, Jul 23 '19 at 12:52
Hi Veve, the accurate size of my email is 52kB. So this is not the problem. Also Gmail Email on Desktop renders the template without any problem. Can't really find helpful website that shows the rules how to style a html template for gmail app email client. — Greg Ostry, Jul 23 '19 at 13:04
[This may be helpful](https://stackoverflow.com/questions/14360581/force-landscape-orientation-mode) to you — Martin, Jul 23 '19 at 14:41
Few pointers: * remove unwanted divs, * paragraph tags take up parent `td`/`th` styles. All you need for those is margin and padding set to zero. Also if you dont need the paragraph tags, i would suggest removing it and control spacing with line breaks ... editors often bloat your code but this ones quiet messy — Syfer, Jul 24 '19 at 00:17

score 1 · Answer 1 · answered Jul 23 '19 at 14:38

Is your full html file over 102KB? You may need to slim down your code.

GMAIL has a file size limit of 102KB. After 102KB it will clip the email to show that amount of content and the rest would be clipped with a ;Click here to view full email" message.

Being over that weight limit can also mess up your layout since GMail will cut right where that 102K mark is regardless of whether or not its not including closing tables and stuff.

How to avoid clipping in email clients

1 Answers1