CODEWITHSUNDEEP
htmlcssemailhtml-email
Greg Ostry
Greg Ostry

Reputation: 1231

How to avoid clipping in email clients

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.

enter image description here

and the iOS is showing the content like a desktop version

enter image description here

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/

Upvotes: 1

Views: 713

Answers (1)

RichardDev
RichardDev

Reputation: 552

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.

Upvotes: 1

Related Questions