title: How to load Internal CSS and fix classes removed in mobile view for email template in gmail
body: <p>I have developed a responsive email template. This template is working fine in outlook web and outlook app. But Gmail web and Gmail internal CSS and classes are removed automatically.
  To hide the pre-header in mobile I tried <a href="https://litmus.com/community/discussions/889-hide-show-td-in-gmail-outlook-yahoo?fbclid=IwAR2gsBs8OVdVCnWGS_t3R4FQlKgI-W9-W6rHuJczoeoZEDNyN6hy-RS4ebc" rel="nofollow noreferrer">to hide preheader in mobile for gmail</a>.</p>
  <p>Please, anyone, help me to fix automatically removed classes and internal CSS issues.
  <a href="https://i.stack.imgur.com/KsC1y.png" rel="nofollow noreferrer">Email desktop design</a>
  <a href="https://i.stack.imgur.com/HasNV.png" rel="nofollow noreferrer">Email template mobile deisgn</a></p>
  <pre><code>  &lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
  &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;  xmlns:v=&quot;urn:schemas-microsoft-com:vml&quot;
     xmlns:o=&quot;urn:schemas-microsoft-com:office:office&quot;&gt;
     &lt;head&gt;
       
        &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot; /&gt;
        &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no&quot; /&gt;
        &lt;!-- Forcing initial-scale shouldn't be necessary --&gt;
        &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot; /&gt;
        &lt;meta name=&quot;format-detection&quot; content=&quot;telephone=no&quot;&gt;
        &lt;title&gt;Forgot Password Emailer&lt;/title&gt;         
        &lt;style type=&quot;text/css&quot;&gt;
           *,
           body,
           img {
           padding: 0;
           margin: 0;
           }
           reset-btnn {
           padding: 100px;
           }
           body {
           width: 100% !important;
           min-width: 100%;
           -webkit-text-size-adjust: 100%;
           -ms-text-size-adjust: 100%;
           margin: 0;
           padding: 0;
           -moz-box-sizing: border-box;
           -webkit-box-sizing: border-box;
           box-sizing: border-box;
           }
           .ExternalClass {
           width: 100%;
           }
           .no-underline {
           text-decoration: none !important;
           }            
          
           body {
           font-size: 16px;
           height: 100% !important;
           font-family: Arial, Helvetica, sans-serif;
           -webkit-text-size-adjust: 100%;
           }
            {
           -ms-text-size-adjust: 100%;
           -webkit-text-size-adjust: 100%;
           }
          
           table,
           td {
           mso-table-lspace: 0pt;
           mso-table-rspace: 0pt;
           }
          
           table {
           border-collapse: collapse;
           table-layout: fixed;
           margin: 0 auto;
           border-spacing: 0 !important;
           }
           td {
           word-wrap: break-word;
           border-collapse: collapse !important;
           }
           table,
           tr,
           td {
           padding: 0;
           vertical-align: top;
           }
         
           img {
           outline: none;
           border: 0 !important;
           text-decoration: none;
           -ms-interpolation-mode: bicubic;
           width: auto;
           max-width: 100%;
           clear: both;
           height: auto;
           }
           a img {
           border: none;
           }
           td u {
           color: #454545;
           }
           #main_table {
           width: 600px !important;
           margin: 0 auto;
           }
          
           @media only screen and (max-width: 550px) {
           .mobscale {
           width: 100% !important;
           }
           .res_img {
           width: 100% !important;
           height: auto !important;
           }
           #main_table {
           width: 100% !important;
           margin: 0 auto;
           }
           .no-break,
           .pre-header {
           display: none !important;
           }
           .mobshow,
           * [lang~=&quot;x-mobshow&quot;] {
           display: block !important;
           width: 100% !important;
           width: auto !important;
           max-height: inherit !important;
           overflow: visible !important;
           float: none !important
           }
           .mobhide,
           * [lang~=&quot;x-mobhide&quot;] {
           display: none !important
           }
           .no-break,
           .pre-header {
           display: none !important;
           }
           .mobtxtcenter {
           text-align: center !important
           }
           .mobtxtjustify {
           text-align: justify !important
           }
           .mob_width_5 {
           width: 5% !important;
           }
           .mob_width_95 {
           width: 95% !important;
           }
           .mob_width_15 {
           width: 15% !important;
           }
           .mob_width_70 {
           width: 70% !important;
           }
           .img_width_cls {
           width: 140px !important;
           }
           .full_width {
           width: 100% !important;
           display: block !important;
           }
           .img_center,
           .center_img {
           margin: 0 auto;
           text-align: center;
           display: block;
           }
           }
           @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
           body {
           -webkit-text-size-adjust: 100%;
           }
           .mobscale {
           width: 100% !important;
           }
           .res_img {
           width: 100% !important;
           height: auto !important;
           }
           #main_table {
           width: 100% !important;
           margin: 0 auto;
           }
           .no-break {
           display: none !important;
           }
           .mobshow,
           * [lang~=&quot;x-mobshow&quot;] {
           display: block !important;
           width: 100% !important;
           width: auto !important;
           max-height: inherit !important;
           overflow: visible !important;
           float: none !important
           }
           .mobhide,
           * [lang~=&quot;x-mobhide&quot;] {
           display: none !important
           }
           .no-break {
           display: none !important;
           }
           .mobtxtcenter {
           text-align: center !important
           }
           .mobtxtjustify {
           text-align: justify !important
           }
           .full_width {
           width: 100% !important;
           display: block !important;
           }
           .img_center,
           .center_img {
           margin: 0 auto;
           text-align: center;
           display: block;
           }
           .mob_width_5 {
           width: 5% !important;
           }
           .mob_width_95 {
           width: 95% !important;
           }
           .mob_width_15 {
           width: 15% !important;
           }
           .mob_width_70 {
           width: 70% !important;
           }
           .img_width_cls {
           width: 140px !important;
           }
           }
        &lt;/style&gt;
     &lt;/head&gt;
     &lt;body&gt;
        &lt;table width=&quot;100%&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; style=&quot;background-color:#ccc;&quot;&gt;
           &lt;tbody&gt;
              &lt;tr&gt;
                 &lt;td&gt;
                    &lt;!--[if (gte mso 9)]&gt;
                    &lt;table width=&quot;600&quot; align=&quot;center&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot;&gt;
                       &lt;tr&gt;
                          &lt;td&gt;
                             &lt;![endif]--&gt;
                             &lt;table width=&quot;600&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; id=&quot;main_table&quot; align=&quot;center&quot;
                                style=&quot;max-width:600px; margin:auto; table-layout: fixed; vertical-align:top; background-color:#fff&quot;&gt;
                                &lt;tbody&gt;
                                   &lt;tr&gt;
                                      &lt;td&gt;
                                         &lt;table width=&quot;100%&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; border=&quot;0&quot; class=&quot;pre-header&quot;&gt;
                                            &lt;tr&gt;
                                               &lt;td width=&quot;3%&quot; align=&quot;left&quot; class=&quot;mob_width_15&quot;&gt;&lt;/td&gt;
                                               &lt;td width=&quot;90%&quot; align=&quot;left&quot; class=&quot;mob_width_70&quot;&gt;
                                                  &lt;table width=&quot;100%&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot;&gt;
                                                     &lt;tr&gt;
                                                        &lt;td&gt;
                                                           &lt;table width=&quot;100%&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot; align=&quot;left&quot;
                                                              class=&quot;mobscale&quot;&gt;
                                                              &lt;tr&gt;
                                                                 &lt;td height=&quot;20&quot; style=&quot;font-size: 1px; line-height: 1px&quot;&gt;&amp;nbsp;
                                                                 &lt;/td&gt;
                                                              &lt;/tr&gt;
                                                              &lt;tr&gt;
                                                                 &lt;td
                                                                    style=&quot;color: #3a4143;font-family: Arial, Helvetica, sans-serif;font-size: 14px;line-height: 20px;text-align: left;mso-line-height-rule: exactly;mso-line-height-alt: 20px;font-weight: bold&quot;&gt;
                                                                    FORGOT PASSWORD
                                                                 &lt;/td&gt;
                                                              &lt;/tr&gt;
                                                              &lt;tr&gt;
                                                                 &lt;td
                                                                    style=&quot;color: #3a4143;font-family: Arial, Helvetica, sans-serif;font-size: 14px;line-height: 20px;text-align: left;mso-line-height-rule: exactly;mso-line-height-alt: 20px;font-weight: bold&quot;
                                                                    class=&quot;link_disable&quot;&gt;
                                                                    From: [From]
                                                                 &lt;/td&gt;
                                                              &lt;/tr&gt;
                                                              &lt;tr&gt;
                                                                 &lt;td
                                                                    style=&quot;color: #3a4143;font-family: Arial, Helvetica, sans-serif;font-size: 14px;line-height: 20px;text-align: left;mso-line-height-rule: exactly;mso-line-height-alt: 20px;font-weight: bold&quot;&gt;
                                                                    Recipient: [FirstName] [[To]] 
                                                                 &lt;/td&gt;
                                                              &lt;/tr&gt;
                                                              &lt;tr&gt;
                                                                 &lt;td
                                                                    style=&quot;color: #3a4143;font-family: Arial, Helvetica, sans-serif;font-size: 14px;line-height: 20px;text-align: left;mso-line-height-rule: exactly;mso-line-height-alt: 20px;font-weight: bold&quot;&gt;
                                                                    Subject Line: Subject
                                                                 &lt;/td&gt;
                                                              &lt;/tr&gt;
                                                              &lt;tr&gt;
                                                                 &lt;td
                                                                    style=&quot;color: #3a4143;font-family: Arial, Helvetica, sans-serif;font-size: 14px;line-height: 20px;text-align: left;mso-line-height-rule: exactly;mso-line-height-alt: 20px;font-weight: bold&quot;&gt;
                                                                    Pre-Header: Forgot password? 
                                                              &lt;/td&gt;
                                                              &lt;/tr&gt;
                                                              &lt;tr&gt;
                                                                 &lt;td height=&quot;50&quot; style=&quot;font-size: 1px; line-height: 1px&quot;&gt;&amp;nbsp;
                                                                 &lt;/td&gt;
                                                              &lt;/tr&gt;
                                                           &lt;/table&gt;
                                                        &lt;/td&gt;
                                                     &lt;/tr&gt;
                                                  &lt;/table&gt;
                                               &lt;/td&gt;
                                               &lt;td width=&quot;3%&quot; align=&quot;left&quot; class=&quot;mob_width_15&quot;&gt;&lt;/td&gt;
                                            &lt;/tr&gt;
                                         &lt;/table&gt;
                                      &lt;/td&gt;
                                   &lt;/tr&gt;
                                   &lt;tr&gt;
                                      &lt;td&gt;
                                         &lt;table width=&quot;100%&quot; align=&quot;center&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; border=&quot;0&quot;&gt;
                                            &lt;tbody&gt;
                                               &lt;tr&gt;
                                                  &lt;td height=&quot;10&quot; style=&quot;font-size: 1px; line-height: 1px&quot;&gt;&amp;nbsp;&lt;/td&gt;
                                               &lt;/tr&gt;
                                               &lt;tr&gt;
                                                  &lt;td align=&quot;center&quot;&gt;
                                                     &lt;img src=&quot;[DomainURL]/-/media/Project/EyecareFAD/Logo/email-header-logo.png&quot;
                                                        class=&quot;center_img&quot; alt=&quot;logo&quot; width=&quot;129&quot; style=&quot;display:block;outline:0;border:0;&quot;&gt;
                                                  &lt;/td&gt;
                                               &lt;/tr&gt;
                                               &lt;tr&gt;
                                                  &lt;td height=&quot;10&quot; width=&quot;100%&quot;
                                                     style=&quot;font-size: 1px; line-height: 1px; border-bottom:1px solid #2b5795;&quot;&gt;
                                                     &amp;nbsp;
                                                  &lt;/td&gt;
                                               &lt;/tr&gt;
                                            &lt;/tbody&gt;
                                         &lt;/table&gt;
                                      &lt;/td&gt;
                                   &lt;/tr&gt;
                                   &lt;tr&gt;
                                      &lt;td&gt;
                                         &lt;table width=&quot;100%&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; border=&quot;0&quot; style=&quot;background-color:#f2f7fc;&quot;&gt;
                                            &lt;tbody&gt;
                                               &lt;tr&gt;
                                                  &lt;td width=&quot;25%&quot; align=&quot;left&quot; class=&quot;mob_width_5&quot;&gt;&lt;/td&gt;
                                                  &lt;td width=&quot;50%&quot; align=&quot;left&quot; class=&quot;mob_width_95&quot;&gt;
                                                     &lt;table width=&quot;100%&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot;&gt;
                                                        &lt;tbody&gt;
                                                           &lt;tr&gt;
                                                              &lt;td height=&quot;35&quot; style=&quot;font-size: 1px; line-height: 1px&quot;&gt;&amp;nbsp;&lt;/td&gt;
                                                           &lt;/tr&gt;
                                                           &lt;tr&gt;
                                                              &lt;td
                                                                 style=&quot;color:#565656;font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:18px;text-align:left;mso-line-height-rule:exactly;mso-line-height-alt:18px;&quot;&gt;
                                                                 Hello [FirstName],
                                                              &lt;/td&gt;
                                                           &lt;/tr&gt;
                                                           &lt;tr&gt;
                                                              &lt;td height=&quot;25&quot; style=&quot;font-size: 1px; line-height: 1px&quot;&gt;&amp;nbsp;&lt;/td&gt;
                                                           &lt;/tr&gt;
                                                           &lt;tr&gt;
                                                              &lt;td
                                                                 style=&quot;color:#565656;font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:18px;text-align:left;mso-line-height-rule:exactly;mso-line-height-alt:18px;&quot;&gt;
                                                                 A request to change your Find-A-Doctor account password has been received. If you
                                                                 would like to reset your password, click the button below. 
                                                              &lt;/td&gt;
                                                           &lt;/tr&gt;
                                                           &lt;tr&gt;
                                                              &lt;td height=&quot;45&quot; style=&quot;font-size: 1px; line-height: 1px&quot;&gt;&amp;nbsp;&lt;/td&gt;
                                                           &lt;/tr&gt;
                                                           &lt;tr&gt;
                                                              &lt;td&gt;
                                                                 &lt;table width=&quot;100%&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot;&gt;
                                                                    &lt;tbody&gt;
                                                                       &lt;tr&gt;
                                                                          &lt;td width=&quot;20%&quot; align=&quot;left&quot;&gt;&lt;/td&gt;
                                                                          &lt;td width=&quot;60%&quot; align=&quot;center&quot;&gt;
                                                                             &lt;a class=&quot;reset-btnn&quot; href=&quot;[DomainURL]/resetpassword?[Token]&quot;
                                                                                target=&quot;_blank&quot;&gt;
                                                                             &lt;img src=&quot;[DomainURL]/-/media/Project/EyecareFAD/Images/reset-password.png&quot;
                                                                                alt=&quot;Reset password button&quot; class=&quot;center_img&quot; width=&quot;140&quot;
                                                                                style=&quot;display:block;outline:0;border:0;&quot;&gt;
                                                                             &lt;/a&gt;
                                                                          &lt;/td&gt;
                                                                          &lt;td width=&quot;20%&quot; align=&quot;left&quot;&gt;&lt;/td&gt;
                                                                       &lt;/tr&gt;
                                                                    &lt;/tbody&gt;
                                                                 &lt;/table&gt;
                                                              &lt;/td&gt;
                                                           &lt;/tr&gt;
                                                           &lt;tr&gt;
                                                              &lt;td height=&quot;45&quot; style=&quot;font-size: 1px; line-height: 1px&quot;&gt;&amp;nbsp;&lt;/td&gt;
                                                           &lt;/tr&gt;
                                                           &lt;tr&gt;
                                                              &lt;td
                                                                 style=&quot;color:#565656;font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:18px;text-align:center;mso-line-height-rule:exactly;mso-line-height-alt:18px;&quot;&gt;
                                                                 If you did not 
                                                                 &lt;a href=&quot;mailto:help@eyecarefad.com&quot;
                                                                    style=&quot;color:#2b5795; font-weight:bold;text-decoration: underline;&quot;&gt;help@eyecarefad.com&lt;/a&gt;.
                                                              &lt;/td&gt;
                                                           &lt;/tr&gt;
                                                           &lt;tr&gt;
                                                              &lt;td height=&quot;70&quot; style=&quot;font-size: 1px; line-height: 1px&quot;&gt;&amp;nbsp;&lt;/td&gt;
                                                           &lt;/tr&gt;
                                                        &lt;/tbody&gt;
                                                     &lt;/table&gt;
                                                  &lt;/td&gt;
                                                  &lt;td width=&quot;25%&quot; align=&quot;left&quot; class=&quot;mob_width_5&quot;&gt;&lt;/td&gt;
                                               &lt;/tr&gt;
                                            &lt;/tbody&gt;
                                         &lt;/table&gt;
                                      &lt;/td&gt;
                                   &lt;/tr&gt;
                                   &lt;tr&gt;
                                      &lt;td&gt;
                                         &lt;table width=&quot;100%&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; border=&quot;0&quot; style=&quot;background-color:#2b5795;&quot;&gt;
                                            &lt;tbody&gt;
                                               &lt;tr&gt;
                                                  &lt;td width=&quot;5%&quot; align=&quot;left&quot; class=&quot;mob_width_15&quot;&gt;&lt;/td&gt;
                                                  &lt;td width=&quot;90%&quot; align=&quot;left&quot; class=&quot;mob_width_70&quot;&gt;
                                                     &lt;table width=&quot;100%&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot;&gt;
                                                        &lt;tbody&gt;
                                                           &lt;tr&gt;
                                                              &lt;td&gt;
                                                                 &lt;table width=&quot;20%&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot; align=&quot;left&quot;
                                                                    class=&quot;mobscale&quot;&gt;
                                                                    &lt;tbody&gt;
                                                                       &lt;tr&gt;
                                                                          &lt;td height=&quot;40&quot; style=&quot;font-size: 1px; line-height: 1px&quot;&gt;&amp;nbsp;&lt;/td&gt;
                                                                       &lt;/tr&gt;
                                                                       &lt;tr align=&quot;center&quot;&gt;
                                                                          &lt;td align=&quot;center&quot;&gt;&lt;img
                                                                             src=&quot;[DomainURL]/-/media/Project/EyecareFAD/Logo/email-footer-small-logo.png&quot;
                                                                             alt=&quot;Footer logo&quot; class=&quot;center_img&quot;
                                                                             style=&quot;display:block;outline:0;border:0;width:104px;&quot;&gt;
                                                                          &lt;/td&gt;
                                                                       &lt;/tr&gt;
                                                                    &lt;/tbody&gt;
                                                                 &lt;/table&gt;
                                                                 &lt;table width=&quot;75%&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot; align=&quot;right&quot;
                                                                    class=&quot;mobscale&quot;&gt;
                                                                    &lt;tbody&gt;
                                                                       &lt;tr&gt;
                                                                          &lt;td height=&quot;40&quot; style=&quot;font-size: 1px; line-height: 1px&quot;&gt;&amp;nbsp;&lt;/td&gt;
                                                                       &lt;/tr&gt;
                                                                       &lt;tr&gt;
                                                                          &lt;td
                                                                             style=&quot;color:#ffffff;font-family:Arial, Helvetica, sans-serif;font-size:10px;line-height:18px;text-align:left;mso-line-height-rule:exactly;mso-line-height-alt:18px;&quot;
                                                                             class=&quot;mobtxtcenter&quot;&gt;Please review
                                                                             &lt;a href=&quot;https://www.allergan.com/privacy-and-terms&quot; target=&quot;_blank&quot;
                                                                                style=&quot;color:#ffffff;text-decoration: underline;&quot;&gt;Privacy
                                                                             statement&lt;/a&gt; and
                                                                             &lt;a href=&quot;https://www.allergan.com/privacy-and-terms/ccpa&quot; target=&quot;_blank&quot;
                                                                                style=&quot;color:#ffffff;text-decoration: underline;&quot;&gt;California Privacy
                                                                             Policy&lt;/a&gt;
                                                                          &lt;/td&gt;
                                                                       &lt;/tr&gt;
                                                                       &lt;tr&gt;
                                                                          &lt;td height=&quot;15&quot; style=&quot;font-size: 1px; line-height: 1px&quot;&gt;&amp;nbsp;&lt;/td&gt;
                                                                       &lt;/tr&gt;
                                                                       &lt;tr&gt;
                                                                          &lt;td
                                                                             style=&quot;color:#ffffff;font-family:Arial, Helvetica, sans-serif;font-size:10px;line-height:18px;text-align:left;mso-line-height-rule:exactly;mso-line-height-alt:18px;&quot;
                                                                             class=&quot;mobtxtcenter&quot;&gt;©2020 AbbVie. All rights
                                                                             reserved. All trademarks are the property of their
                                                                             respective owners.
                                                                             RES‌1‌4‌1‌1‌6‌0
                                                                             1‌1‌/‌2‌0‌
                                                                          &lt;/td&gt;
                                                                       &lt;/tr&gt;
                                                                       &lt;tr&gt;
                                                                          &lt;td height=&quot;45&quot; style=&quot;font-size: 1px; line-height: 1px&quot;&gt;&amp;nbsp;&lt;/td&gt;
                                                                       &lt;/tr&gt;
                                                                    &lt;/tbody&gt;
                                                                 &lt;/table&gt;
                                                              &lt;/td&gt;
                                                           &lt;/tr&gt;
                                                        &lt;/tbody&gt;
                                                     &lt;/table&gt;
                                                  &lt;/td&gt;
                                                  &lt;td width=&quot;5%&quot; align=&quot;left&quot; class=&quot;mob_width_15&quot;&gt;&lt;/td&gt;
                                               &lt;/tr&gt;
                                            &lt;/tbody&gt;
                                         &lt;/table&gt;
                                      &lt;/td&gt;
                                   &lt;/tr&gt;
                                &lt;/tbody&gt;
                             &lt;/table&gt;
                             &lt;!--[if (gte mso 9)]&gt;
                          &lt;/td&gt;
                       &lt;/tr&gt;
                    &lt;/table&gt;
                    &lt;![endif]--&gt;
                 &lt;/td&gt;
              &lt;/tr&gt;
           &lt;/tbody&gt;
        &lt;/table&gt;
     &lt;/body&gt;
  </code></pre>