1. Zuhause
  2. Frage und Antwort
  3. Verstecken einer Tabelle aus Google Mail "Bilder unten anzeigen"

Verstecken einer Tabelle aus Google Mail "Bilder unten anzeigen"

2017-09-06 3 views
0

Ich entwickle eine HTML-E-Mail, die zwei Spalten für das Desktop-Design und eine für das mobile Design verwendet. Anstatt sich mit der Komplexität des Targetings bestimmter Elemente der Desktop-Version mit Medienabfragen auseinander zu setzen und sie für mobile Geräte arbeiten zu lassen (dies ist ein Albtraum mit E-Mails ...), dachte ich mir, ich würde eine komplett separate Tabelle für Mobilgeräte erstellen und machen Sie die Desktop-Version verschwinden (Anzeige: keine), an einem Haltepunkt von unter 450px.Verstecken einer Tabelle aus Google Mail "Bilder unten anzeigen"

Jetzt funktioniert das; auf dem Desktop (über 450px), wo ich die mobile Tabelle auf (display none; display: none! wichtig) setze, kommt es jedoch zu einem Problem. Wenn ich die E-Mail auf einer Bildschirmgröße größer als 450px öffne (IN GMAIL, nicht in einem Browser. Ich verwende einen Dienst namens "freshmail", um dies zu testen), erscheint zunächst nur die Desktop-Tabelle; jedoch ist keines der Bilder vorhanden. Google Mail fragt "Bilder unten anzeigen". Wenn Sie darauf klicken, werden meine Stylesheets so umgeschrieben, dass auch die mobile Tabelle angezeigt wird, obwohl ich dies ausdrücklich nicht sage.

Ich weiß, dass dies ein heikles Geschäft ist, und ich habe viele Workarounds versucht, um es zu überwinden, aber keiner hat funktioniert. Wenn mir jemand helfen könnte, würde ich das sehr schätzen.

Mein Code ist wie folgt:

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 

     <title></title> 

     <style> 

     @media (min-width: 451px) { 
      #mobile { 
       display: none; 
       display: none !important; 
      } 
     } 

     @media (max-width: 450px) { 
      #desktop { 
       display: none !important; 
      } 

      #mobile { 
       display: block !important; 
      } 
     } 

     </style> 

    </head> 


    <body style="width: 100% !important; margin: 0; padding: 0; font-size: 13.5px; line-height: 1.4; font-family: Helvetica; overflow-x: hidden;"> 
     <table id="desktop" cellpadding="0" cellspacing="0" width="100%" border="1px solid black"> 
      <tr> 
       <td style="display: block; clear: both !important; margin: 0 auto !important; width: 600px !important; overflow: hidden;"> 
        <table border="0" cellspacing="0" width="100%" style="border-collapse: collapse;"> 

         <tr style=""> 
          <th> 

          </th> 
          <th style="padding-top: 20px;"> 
           <span style="color: #504e4b;"/> 
            example text        
           </span> 
          </th> 
         </tr> 

         <tr style="padding: 0; background: #ffffff; color: #504e4b;"> 
          <td colspan="2"> 
           <a href='#' style="cursor: default;"><img src="assets/example.gif" style="display: block;"></a> 
           <a href='#' style="cursor: default;"><img src="assets/example.gif" style="display: block; pointer-events: none; cursor: default;"></a> 
           <span style="display: block; font-size: 13px; font-weight: 200; text-transform: uppercase; margin-top: 20px; margin-bottom: 10px; padding-left: 30px; color: #f36b22;"> 
            example text 
           </span> 
           <span style="display: block; font-size: 35px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 10px; margin-bottom: 10px; padding-left: 30px;"> 
            example text 
           </span> 
           <span style="display: block; font-size: 13px; font-weight: 200; padding-left: 30px; padding-bottom: 20px;"> 
            example text 
           </span> 
          </td> 
         </tr> 

         <tr style="padding: 0; background: #ffffff;"> 
          <td style="width: 50%; padding: 0px; border: none;"> 
           <a href='#' style="cursor: default;"><img src="assets/example.png" style="display: block;"></a> 
          </td> 
          <td style="padding: 0px; border: none;"> 

          </td> 
         </tr> 

         <tr style="height: 415px; color: #504e4b;"> 
          <td style="padding: 0px; width: 50%; background-color: #fccb03; vertical-align: top;"> 
           <a href='#' style="cursor: default;"><img src="assets/example.png" style="display: block;"></a> 
           <span style="display: block; height: 10px;"></span> 
           <span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 10px; margin-bottom: 10px; padding-left: 20px;"> 
            example text 
           </span> 
           <span style="display: block; padding-left: 20px; padding-right: 20px; padding-bottom: 50px; font-weight: 200; color: #504e4b;"> 
            example text 
           </span> 
          </td> 
          <td style="padding: 0px;"> 
           <a href='#' style="cursor: default;"><img src="assets/example.gif" style="display: block;"></a> 
          </td> 
         </tr> 

         <tr style="vertical-align: top; color: #504e4b;"> 
          <td style="width: 50%; padding: 0px; border: none;"> 
           <a href='#' style="cursor: default;"><img src="assets/example.png" style="display: block;"></a> 
          </td> 
          <td style="text-align: right; padding: 0px;"> 
           <a href='#' style="cursor: default;"><img src="assets/example.png" align="right" style="display: block; padding-right: 20px;"></a> 
           <span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 180px; margin-bottom: 10px; padding-right: 20px;"> 
            example text 
           </span> 
           <span style="display: block; padding-left: 20px; padding-right: 20px; padding-bottom: 40px; font-weight: 200; color: #504e4b;"> 
            example text 
           </span> 
           <a href='#' style="cursor: default;"><img src="assets/example.png" align="right" style="display: block;"></a> 
          </td> 
         </tr> 

         <tr style="padding: 0; background: #f36b22; color: #ffffff;"> 
          <td> 
           <span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-bottom: 10px; padding-left: 30px; padding-top: 50px;"> 
            example text 
           </span> 
           <span style="display: block; padding-left: 30px; padding-right: 20px; padding-bottom: 50px; font-weight: 200;"> 
            example text 
           </span> 
          </td> 
          <td style="padding: 0px;"> 
           <a href='#' style="cursor: default;"><img src="assets/example.png" style="display: block;"></a> 
          </td> 
         </tr> 

         <tr style="padding: 0; background: #ffffff;"> 
          <td style="padding: 0px; border: none;"> 

          </td> 
          <td style="width: 50%; padding: 0px; border: none;"> 
           <a href='#' style="cursor: default;"><img src="assets/example.png" align="right" style="display: block;"></a> 
          </td> 
         </tr> 

         <tr style="color: #504e4b;"> 
          <td align="center" colspan="2" style="padding: 20px 40px 20px 40px;"> 
           <span style="display: block;"> 
            example text 
           </span> 
           <span style="display: block; padding: 20px 0px 20px 0px;"> 
            example text 
           </span> 
          </td> 
         </tr> 


        </table> 
       </td> 
      </tr> 
     </table> 


     <!-- mobile view --> 
     <table id="mobile" border="1px solid #f2f2f2" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 600px; margin: 0 auto;"> 
      <tr> 
       <td align="center" style=" clear: both !important; margin: 0 auto !important; width: 100% !important; max-width: 450px !important; overflow: hidden; overflow-y: hidden;"> 
        <table align="center" border="0" cellpadding="0" cellspacing="0" style=" border-collapse: collapse;"> 

         <tr id="date"> 
          <th style="padding-top: 20px;">example text</th> 
         </tr> 

         <tr> 
          <td align="center" style="padding: 0; overflow-x: hidden; vertical-align: middle;"> 
           <img id="header" src="assets/example.gif" style="width: 100% !important; display: block !important;" /> 
          </td> 
         </tr> 

         <tr> 
          <td align="center" style="padding: 0; overflow-x: hidden; vertical-align: middle;"> 
           <img id="planter" src="assets/example.gif" style="width: 100% !important; display: block !important;" /> 
          </td> 
         </tr> 

         <tr> 
          <td style="padding: 20px;"> 
           <span style="display: block; font-size: 13px; font-weight: 200; text-transform: uppercase; margin-top: 20px; margin-bottom: 10px; color: #f36b22;"> 
            example text 
           </span> 
           <span style="display: block; font-size: 35px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 10px; margin-bottom: 10px;"> 
            example text 
           </span> 
           <span style="display: block; font-size: 13px; font-weight: 200; padding-bottom: 0px;"> 
            example text 
           </span> 
          </td> 
         </tr> 

         <tr style="padding: 0; background: #ffffff;"> 
          <td style="padding: 0px; border: none;"> 
           <a href='#' style="cursor: default;"><img id="trend-top" src="assets/example.png" style="display: block;"></a> 
          </td> 
         </tr> 


         <tr style="color: #504e4b;"> 
          <td style="padding: 0px; width: 50%; background-color: #fccb03; vertical-align: top;"> 
           <a href='#' style="cursor: default;"><img id="trend-bottom" src="assets/example.png" style="display: block;"></a> 
           <span style="display: block; height: 10px;"></span> 
           <span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 10px; margin-bottom: 10px; padding-left: 20px;"> 
            example text 
           </span> 
           <span style="display: block; padding-left: 20px; padding-right: 20px; padding-bottom: 50px; font-weight: 200; color: #504e4b;"> 
            example text 
           </span> 
          </td> 
         </tr> 

         <tr> 
          <td> 
           <img id="trend-wheels" src="assets/example.gif" style="display: block; width: 100%;"> 
          </td> 
         </tr> 

         <tr> 
          <td align="center" style="background: #ffffff;"> 
           <img id="display-ideas" src="assets/example.png" style="max-width: 170px; display: block; width: 100%;"> 
           <span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 30px; margin-bottom: 10px; padding-left: 20px; text-align: left;"> 
            example text 
           </span> 
           <span style="display: block; padding-left: 20px; padding-right: 20px; padding-bottom: 0px; font-weight: 200; color: #504e4b; text-align: left;"> 
            example text 
           </span> 
          </td> 
         </tr> 
         <tr> 
          <td> 
           <img id="pot-stand" src="assets/example.png" style="display: block; margin: 0 auto; padding: 20px 0px 40px 0px; max-width: 300px; width: 90%"> 
           <a href='#' style="cursor: default;"><img src="assets/example.png" align="right" style="display: block;"></a> 
          </td> 
         </tr> 

         <tr align="right" style="padding: 0; background: #f36b22; color: #ffffff;"> 
          <td style="padding: 0px;"> 
           <a href='#' style="cursor: default;"><img src="assets/example.png" style="display: block;"></a> 
           <a href='#' style="cursor: default;"><img src="assets/example.png" align="right" style="display: block;"></a> 
          </td> 
         </tr> 
         <tr align="right" style="padding: 0; background: #f36b22; color: #ffffff;"> 
          <td> 
           <span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-bottom: 10px; padding-left: 35px; text-align: left;"> 
            example text 
           </span> 
           <span style="display: block; padding-left: 30px; padding-right: 20px; padding-bottom: 50px; font-weight: 200; text-align: left;"> 
            example text 
           </span> 
          </td> 
         </tr> 

         <tr style="color: #504e4b;"> 
          <td align="center" style="padding: 20px 40px 20px 40px;"> 
           <span style="display: block;"> 
            example text 
           </span> 
           <span style="display: block; padding: 20px 0px 20px 0px;"> 
            example text 
           </span> 
          </td> 
         </tr> 
        </table> 
       </td> 
      </tr> 
     </table> 


    </body> 
</html>

Quelle

2017-09-06 laroy

+0

Aus- und Einblenden von Elementen in E-Mails ist heikle Angelegenheit. – scoopzilla

Antwort

0

Versuchen Sie, die mso-Regeln auf Ihre Haut und un-hide Zugabe. Sie können auch grundlegende Breakpoints verwenden, aber ich habe festgestellt, dass auch die Verwendung der @media screen and (max-width:XXpx) eine bessere Lösung ist, da die meisten Leute keine Laptops mitnehmen, die weniger als 450 Pixel breit sind.

Email-Design und Entwicklung ist rein eine völlig gemischte Tasche, und ich wünsche Ihnen viel Glück.

Alles in allem würde ich diesen Ansatz nicht verwenden, um Inhalte zu verstecken und sichtbar zu machen. Outlook wird es vollständig ignorieren und Gmail wird (wie Sie wissen) unvorhersehbare Dinge tun.

Hier ist Link zu einer grundlegenden Vorlage, die ich gemacht habe, die helfen könnte.

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
 

 
     <title></title> 
 

 
     <style> 
 
\t \t #outlook a{ 
 
\t \t \t padding:0; 
 
\t \t } 
 
\t \t .ReadMsgBody{ 
 
\t \t \t width:100%; 
 
\t \t } 
 
\t \t body{ 
 
\t \t \t width:100% !important; 
 
\t \t \t min-width:100%; 
 
\t \t \t -webkit-text-size-adjust:100%; 
 
\t \t \t -ms-text-size-adjust:100%; 
 
\t \t \t -webkit-font-smoothing: antialiased; 
 
\t \t } 
 
\t \t v*{ 
 
\t \t  \t behavior:url(#default#VML); 
 
\t \t \t display:inline-block; 
 
\t \t } 
 
\t \t .ExternalClass{ 
 
\t \t \t width:100%; 
 
\t \t } 
 
\t \t td{ 
 
\t \t \t border-collapse: collapse!important; 
 
\t \t } 
 
\t \t .ExternalClass, 
 
\t \t .ExternalClass p, 
 
\t \t .ExternalClass span, 
 
\t \t .ExternalClass font, 
 
\t \t .ExternalClass td, 
 
\t \t .ExternalClass div{ 
 
\t \t \t line-height:100%; 
 
\t \t } 
 
\t \t a img{ 
 
\t \t \t border:none; 
 
\t \t } 
 
\t \t a { 
 
\t \t \t text-decoration:none !important; 
 
\t \t } 
 
\t \t img{ 
 
\t \t \t display:block; 
 
\t \t \t outline:none; 
 
\t \t \t text-decoration:none; 
 
\t \t \t border:none; 
 
\t \t \t -ms-interpolation-mode: bicubic; 
 
\t \t } 
 
\t \t table{ 
 
\t \t \t border-spacing:0; 
 
\t \t \t border-collapse: collapse !important; 
 
\t \t \t mso-table-lspace:0pt; 
 
\t \t \t mso-table-rspace:0pt; 
 
\t \t } 
 
     @media (min-width: 451px) { 
 
      table#mobile { 
 
       display: none !important; 
 
\t \t \t max-height: 0px; 
 
\t \t \t font-size: 0px; 
 
\t \t \t overflow: hidden; 
 
\t \t \t mso-hide: all; 
 
      } 
 
     } 
 

 
     @media (max-width: 450px) { 
 
      table#desktop { 
 
       display: none !important; 
 
\t \t \t max-height: 0px; 
 
\t \t \t font-size: 0px; 
 
\t \t \t overflow: hidden; 
 
\t \t \t mso-hide: all; 
 
      } 
 

 
      table#mobile { 
 
       display: inline !important; 
 
      } 
 
     } 
 

 
     </style> 
 

 
    </head> 
 

 

 
    <body style="width: 100% !important; margin: 0; padding: 0; font-size: 13.5px; line-height: 1.4; font-family: Helvetica; overflow-x: hidden;"> 
 
     <table id="desktop" cellpadding="0" cellspacing="0" width="100%" border="1px solid black"> 
 
      <tr> 
 
       <td style="display: block; clear: both !important; margin: 0 auto !important; width: 600px !important; overflow: hidden;"> 
 
        <table border="0" cellspacing="0" width="100%" style="border-collapse: collapse;"> 
 

 
         <tr style=""> 
 
          <th> 
 

 
          </th> 
 
          <th style="padding-top: 20px;"> 
 
           <span style="color: #504e4b;"/> 
 
            example text        
 
           </span> 
 
          </th> 
 
         </tr> 
 

 
         <tr style="padding: 0; background: #ffffff; color: #504e4b;"> 
 
          <td colspan="2"> 
 
           <a href='#' style="cursor: default;"><img src="assets/example.gif" style="display: block;"></a> 
 
           <a href='#' style="cursor: default;"><img src="assets/example.gif" style="display: block; pointer-events: none; cursor: default;"></a> 
 
           <span style="display: block; font-size: 13px; font-weight: 200; text-transform: uppercase; margin-top: 20px; margin-bottom: 10px; padding-left: 30px; color: #f36b22;"> 
 
            example text 
 
           </span> 
 
           <span style="display: block; font-size: 35px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 10px; margin-bottom: 10px; padding-left: 30px;"> 
 
            example text 
 
           </span> 
 
           <span style="display: block; font-size: 13px; font-weight: 200; padding-left: 30px; padding-bottom: 20px;"> 
 
            example text 
 
           </span> 
 
          </td> 
 
         </tr> 
 

 
         <tr style="padding: 0; background: #ffffff;"> 
 
          <td style="width: 50%; padding: 0px; border: none;"> 
 
           <a href='#' style="cursor: default;"><img src="assets/example.png" style="display: block;"></a> 
 
          </td> 
 
          <td style="padding: 0px; border: none;"> 
 

 
          </td> 
 
         </tr> 
 

 
         <tr style="height: 415px; color: #504e4b;"> 
 
          <td style="padding: 0px; width: 50%; background-color: #fccb03; vertical-align: top;"> 
 
           <a href='#' style="cursor: default;"><img src="assets/example.png" style="display: block;"></a> 
 
           <span style="display: block; height: 10px;"></span> 
 
           <span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 10px; margin-bottom: 10px; padding-left: 20px;"> 
 
            example text 
 
           </span> 
 
           <span style="display: block; padding-left: 20px; padding-right: 20px; padding-bottom: 50px; font-weight: 200; color: #504e4b;"> 
 
            example text 
 
           </span> 
 
          </td> 
 
          <td style="padding: 0px;"> 
 
           <a href='#' style="cursor: default;"><img src="assets/example.gif" style="display: block;"></a> 
 
          </td> 
 
         </tr> 
 

 
         <tr style="vertical-align: top; color: #504e4b;"> 
 
          <td style="width: 50%; padding: 0px; border: none;"> 
 
           <a href='#' style="cursor: default;"><img src="assets/example.png" style="display: block;"></a> 
 
          </td> 
 
          <td style="text-align: right; padding: 0px;"> 
 
           <a href='#' style="cursor: default;"><img src="assets/example.png" align="right" style="display: block; padding-right: 20px;"></a> 
 
           <span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 180px; margin-bottom: 10px; padding-right: 20px;"> 
 
            example text 
 
           </span> 
 
           <span style="display: block; padding-left: 20px; padding-right: 20px; padding-bottom: 40px; font-weight: 200; color: #504e4b;"> 
 
            example text 
 
           </span> 
 
           <a href='#' style="cursor: default;"><img src="assets/example.png" align="right" style="display: block;"></a> 
 
          </td> 
 
         </tr> 
 

 
         <tr style="padding: 0; background: #f36b22; color: #ffffff;"> 
 
          <td> 
 
           <span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-bottom: 10px; padding-left: 30px; padding-top: 50px;"> 
 
            example text 
 
           </span> 
 
           <span style="display: block; padding-left: 30px; padding-right: 20px; padding-bottom: 50px; font-weight: 200;"> 
 
            example text 
 
           </span> 
 
          </td> 
 
          <td style="padding: 0px;"> 
 
           <a href='#' style="cursor: default;"><img src="assets/example.png" style="display: block;"></a> 
 
          </td> 
 
         </tr> 
 

 
         <tr style="padding: 0; background: #ffffff;"> 
 
          <td style="padding: 0px; border: none;"> 
 

 
          </td> 
 
          <td style="width: 50%; padding: 0px; border: none;"> 
 
           <a href='#' style="cursor: default;"><img src="assets/example.png" align="right" style="display: block;"></a> 
 
          </td> 
 
         </tr> 
 

 
         <tr style="color: #504e4b;"> 
 
          <td align="center" colspan="2" style="padding: 20px 40px 20px 40px;"> 
 
           <span style="display: block;"> 
 
            example text 
 
           </span> 
 
           <span style="display: block; padding: 20px 0px 20px 0px;"> 
 
            example text 
 
           </span> 
 
          </td> 
 
         </tr> 
 

 

 
        </table> 
 
       </td> 
 
      </tr> 
 
     </table> 
 

 

 
     <!-- mobile view --> 
 
     <table id="mobile" border="1px solid #f2f2f2" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 600px; margin: 0 auto;"> 
 
      <tr> 
 
       <td align="center" style=" clear: both !important; margin: 0 auto !important; width: 100% !important; max-width: 450px !important; overflow: hidden; overflow-y: hidden;"> 
 
        <table align="center" border="0" cellpadding="0" cellspacing="0" style=" border-collapse: collapse;"> 
 

 
         <tr id="date"> 
 
          <th style="padding-top: 20px;">example text</th> 
 
         </tr> 
 

 
         <tr> 
 
          <td align="center" style="padding: 0; overflow-x: hidden; vertical-align: middle;"> 
 
           <img id="header" src="assets/example.gif" style="width: 100% !important; display: block !important;" /> 
 
          </td> 
 
         </tr> 
 

 
         <tr> 
 
          <td align="center" style="padding: 0; overflow-x: hidden; vertical-align: middle;"> 
 
           <img id="planter" src="assets/example.gif" style="width: 100% !important; display: block !important;" /> 
 
          </td> 
 
         </tr> 
 

 
         <tr> 
 
          <td style="padding: 20px;"> 
 
           <span style="display: block; font-size: 13px; font-weight: 200; text-transform: uppercase; margin-top: 20px; margin-bottom: 10px; color: #f36b22;"> 
 
            example text 
 
           </span> 
 
           <span style="display: block; font-size: 35px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 10px; margin-bottom: 10px;"> 
 
            example text 
 
           </span> 
 
           <span style="display: block; font-size: 13px; font-weight: 200; padding-bottom: 0px;"> 
 
            example text 
 
           </span> 
 
          </td> 
 
         </tr> 
 

 
         <tr style="padding: 0; background: #ffffff;"> 
 
          <td style="padding: 0px; border: none;"> 
 
           <a href='#' style="cursor: default;"><img id="trend-top" src="assets/example.png" style="display: block;"></a> 
 
          </td> 
 
         </tr> 
 

 

 
         <tr style="color: #504e4b;"> 
 
          <td style="padding: 0px; width: 50%; background-color: #fccb03; vertical-align: top;"> 
 
           <a href='#' style="cursor: default;"><img id="trend-bottom" src="assets/example.png" style="display: block;"></a> 
 
           <span style="display: block; height: 10px;"></span> 
 
           <span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 10px; margin-bottom: 10px; padding-left: 20px;"> 
 
            example text 
 
           </span> 
 
           <span style="display: block; padding-left: 20px; padding-right: 20px; padding-bottom: 50px; font-weight: 200; color: #504e4b;"> 
 
            example text 
 
           </span> 
 
          </td> 
 
         </tr> 
 

 
         <tr> 
 
          <td> 
 
           <img id="trend-wheels" src="assets/example.gif" style="display: block; width: 100%;"> 
 
          </td> 
 
         </tr> 
 

 
         <tr> 
 
          <td align="center" style="background: #ffffff;"> 
 
           <img id="display-ideas" src="assets/example.png" style="max-width: 170px; display: block; width: 100%;"> 
 
           <span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 30px; margin-bottom: 10px; padding-left: 20px; text-align: left;"> 
 
            example text 
 
           </span> 
 
           <span style="display: block; padding-left: 20px; padding-right: 20px; padding-bottom: 0px; font-weight: 200; color: #504e4b; text-align: left;"> 
 
            example text 
 
           </span> 
 
          </td> 
 
         </tr> 
 
         <tr> 
 
          <td> 
 
           <img id="pot-stand" src="assets/example.png" style="display: block; margin: 0 auto; padding: 20px 0px 40px 0px; max-width: 300px; width: 90%"> 
 
           <a href='#' style="cursor: default;"><img src="assets/example.png" align="right" style="display: block;"></a> 
 
          </td> 
 
         </tr> 
 

 
         <tr align="right" style="padding: 0; background: #f36b22; color: #ffffff;"> 
 
          <td style="padding: 0px;"> 
 
           <a href='#' style="cursor: default;"><img src="assets/example.png" style="display: block;"></a> 
 
           <a href='#' style="cursor: default;"><img src="assets/example.png" align="right" style="display: block;"></a> 
 
          </td> 
 
         </tr> 
 
         <tr align="right" style="padding: 0; background: #f36b22; color: #ffffff;"> 
 
          <td> 
 
           <span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-bottom: 10px; padding-left: 35px; text-align: left;"> 
 
            example text 
 
           </span> 
 
           <span style="display: block; padding-left: 30px; padding-right: 20px; padding-bottom: 50px; font-weight: 200; text-align: left;"> 
 
            example text 
 
           </span> 
 
          </td> 
 
         </tr> 
 

 
         <tr style="color: #504e4b;"> 
 
          <td align="center" style="padding: 20px 40px 20px 40px;"> 
 
           <span style="display: block;"> 
 
            example text 
 
           </span> 
 
           <span style="display: block; padding: 20px 0px 20px 0px;"> 
 
            example text 
 
           </span> 
 
          </td> 
 
         </tr> 
 
        </table> 
 
       </td> 
 
      </tr> 
 
     </table> 
 

 

 
    </body> 
 
</html>

Quelle

2017-09-06 23:00:59 scoopzilla

+0

Ja, letztendlich konnte ich keine Möglichkeit finden, die Protokolle von Google Mail zu umgehen und änderte schließlich das Design der E-Mail so, dass nur eine Version für Desktop und Mobile statt für ein Design pro Plattform zur Verfügung stand. Danke für deinen Beitrag. – laroy

Verwandte Themen

 Verwandte Themen