0

I am coding up an HTML email and I have noticed that the entire message when opened in Gmail desktop and mobile app, opens it collapsed and I have to press the 3 dots to expand.

Is there a way (as most other HTML emails I receive open expanded) to have my messages open expanded?

I am using Swift mailer (PHP) and my email styles are below.

<style type="text/css">
div, p, a, li, td {
    -webkit-text-size-adjust: none;
}
.ReadMsgBody {
    width: 100%;
    background-color: #d1d1d1;
}
.ExternalClass {
    width: 100%;
    background-color: #d1d1d1;
    line-height: 100%;
}
body {
    width: 100%;
    height: 100%;
    background-color: #d1d1d1;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    color: #333333;
}
html {
    width: 100%;
}
img {
    -ms-interpolation-mode: bicubic;
}
div[style*="margin: 16px 0"] {
    margin: 0 !important;
}
.wrapper {
    width: 100%;
    table-layout: fixed;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
.webkit {
    max-width: 600px;
    margin: 0 auto;
}
table[class=full] {
    padding: 0 !important;
    border: none !important;
}
table td img[class=imgresponsive] {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

@media only screen and (max-width: 800px) {
body {
    width: auto!important;
}
table[class=full] {
    width: 100%!important;
}
table[class=devicewidth] {
    width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px!important;
}
table td img.responsiveimg {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}
}

@media only screen and (max-width: 640px) {
table[class=devicewidth] {
    width: 100% !important;
}
table[class=inner] {
    width: 100%!important;
    text-align: center!important;
    clear: both;
}
table td a[class=top-button] {
    width: 160px !important;
    font-size: 14px !important;
    line-height: 37px !important;
}
table td[class=readmore-button] {
    text-align: center !important;
}
table td[class=readmore-button] a {
    float: none !important;
    display: inline-block !important;
}
.hide {
    display: none !important;
}
table td[class=smallfont] {
    border: none !important;
    font-size: 26px !important;
}
table td[class=sidespace] {
    width: 10px !important;
}
}

@media only screen and (max-width: 520px) {
}

@media only screen and (max-width: 480px) {
table {
    border-collapse: collapse;
}
table td[class=template-img] img {
    width: 100% !important;
    display: block !important;
}
}

@media only screen and (max-width: 320px) {
}
</style>

My head code:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
    table {border-collapse: collapse;}
</style>
<![endif]-->
<link href='http://fonts.googleapis.com/css?family=Raleway:400,300,700,600' rel='stylesheet' type='text/css'>
<head>
<!--[if gte mso 12]>
<style type="text/css">
    [a.btn {
    padding:15px 22px !important;
    display:inline-block !important;
}]
</style>
<![endif]-->
puks1978
  • 3,667
  • 11
  • 44
  • 103
  • I think this is probably because this has identical content as another email (probably another test email) so gmail hides it. I don't think there is a way to turn that off. – Cave Johnson May 02 '16 at 23:30
  • [See this question and its answers](https://stackoverflow.com/questions/11078264/how-to-get-rid-of-show-trimmed-content-in-gmail-html-emails). It looks like you can change the subject of the email to stop gmail from collapsing the content. – Cave Johnson May 02 '16 at 23:32
  • Thanks for the answers. Unfortunately just adding a random string wasn't enough. I needed to add a new subject line for each message which for testing will work fine. Thanks again. – puks1978 May 02 '16 at 23:48

0 Answers0