0
Ich benutze von MailChimp um responsive E-Mail zu erstellen & es funktioniert wie ein Charme.Responsive Layout in Google Mail App nach dem Hinzufügen <br /> Tag bricht
Hauptausgabe: Ich habe 3 col-Layout erstellt, jeder mit etwas Text und einem Knopf, aber da Schriftart in verschiedenen Browsern und Betriebssystem etwas anders macht der Text endet manchmal mit 2 Zeilen in einem col und 3 in anderen was zu einer horizontalen Unordnung der Schaltflächen "Jetzt kaufen" führt.
Es ist Lösung neue Ausgabe in Google Mail App zu erstellen: Ich habe <br /> Tagline zu brechen, so Text immer zu 3 Zeilen verteilt halten Taste ausgerichtet, aber zerbrochenen Layout in gmail App.
Hier sind Screenshots mit br-Tag auf links und ohne br-Tag auf dem rechten Seite:
.. 
Dinge, die ich versucht habe: ich <br /> Tag display: none; auf Handy zu setzen versucht, es aber Google Mail-App reagiert nicht auf die Medienabfrage.
Anstatt <br /> zu verwenden, verwendete ich div Tags, um Zeilen zu brechen, aber das Ergebnis war das gleiche.
Ich versuchte Einstellung min-width auf Cols Tabelle zu 300, Es behob das Problem, aber das Layout auf Desktop-E-Mail-Clients zerstört.
Ich glaube, wenn Text das Layout nicht drückt, um die maximale Breite zu nehmen, wird das Layout nicht erweitert, um die gesamte Breite in Google Mail App zu überdecken und damit die 3 Spalten beginnt sich gegenseitig zu überlappen, anstatt die volle Breite nach Text wurden auf kleine Stücke von 3 Wörtern anstatt auf einen ganzen Satz gesetzt.
Mir gehen die Ideen aus, alles, was Sie glauben, kann dieses Problem beheben, das ich gerne versuchen würde.
-Code minimierte Version für nicht-minimiert click here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="viewport" content="width=device-width"><title>Test</title><!--
This email is an experimental proof-of-concept based on the
idea that the most common design patterns seen in email can
be placed in modular blocks and moved around to create
different designs.
The same principle is used to build the email templates in
MailChimp's Drag-and-Drop email editor.
This email is optimized for mobile email clients, and even
works relatively well in the Android Gmail App, which does
not support Media Queries, but does have limited mobile-
friendly functionality.
While this coding method is very flexible, it can be more
brittle than traditionally-coded emails, particularly in
Microsoft Outlook 2007-2010. Outlook-specific conditional
CSS is included to counteract the inconsistencies that
crop up.
For more information on HTML email design and development,
visit http://templates.mailchimp.com
--><style type="text/css">/*////// RESET STYLES //////*/
body, #bodyTable, #bodyCell{height:100% !important; margin:0; padding:0; width:100% !important;}
table{border-collapse:collapse;}
img, a img{border:0; outline:none; text-decoration:none;}
h1, h2, h3, h4, h5, h6{margin:0; padding:0;}
p{margin: 1em 0; background-color: #000; color: #fff;}
.divider p {background: #000 !important; color: #000 !important;}
.divider p span{background: #000 !important; color: #000 !important;}
/*////// CLIENT-SPECIFIC STYLES //////*/
.ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail/Outlook.com to display emails at full width. */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div{line-height:100%;} /* Force Hotmail/Outlook.com to display line heights normally. */
table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up. */
#outlook a{padding:0;} /* Force Outlook 2007 and up to provide a "view in browser" message. */
img{-ms-interpolation-mode: bicubic;} /* Force IE to smoothly render resized images. */
body, table, td, p, a, li, blockquote{-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%;} /* Prevent Windows- and Webkit-based mobile platforms from changing declared text sizes. */
/*////// FRAMEWORK STYLES //////*/
.flexibleContainerCell, .footer{padding-top:20px; padding-Right:20px; padding-Left:20px;}
.flexibleImage{height:auto;}
.bottomShim{padding-bottom:20px;}
.imageContent, .imageContentLast{padding-bottom:20px;}
.nestedContainerCell{padding-top:20px; padding-Right:20px; padding-Left:20px;}
/*////// GENERAL STYLES //////*/
body, #bodyTable{background-color:#232323;}
#bodyCell{padding-top:20px; padding-bottom:20px;}
#emailBody{background-color:#000;}
h1, h2, h3, h4, h5, h6{color:#202020; font-family:Helvetica; font-size:20px; line-height:125%; text-align:Left;}
.textContent, .textContentLast, .product-sec{color:#404040; font-family:Helvetica; font-size:16px; line-height:125%; text-align:Left;}
.textContent a, .textContentLast a, .product-sec a{color:#2C9AB7; text-decoration:underline;}
.nestedContainer{background-color:#E5E5E5; border:1px solid #CCCCCC;}
.emailButton{background-color:#2C9AB7; border-collapse:separate; border-radius:4px;}
.buttonContent{color:#FFFFFF; font-family:Helvetica; font-size:18px; font-weight:bold; line-height:100%; padding:15px; text-align:center;}
.buttonContent a{color:#FFFFFF; display:block; text-decoration:none;}
.emailCalendar{background-color:#FFFFFF; border:1px solid #CCCCCC;}
.emailCalendarMonth{background-color:#2C9AB7; color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:16px; font-weight:bold; padding-top:10px; padding-bottom:10px; text-align:center;}
.emailCalendarDay{color:#2C9AB7; font-family:Helvetica, Arial, sans-serif; font-size:60px; font-weight:bold; line-height:100%; padding-top:20px; padding-bottom:20px; text-align:center;}@media only screen and (max-width: 480px){.product-sec{ padding-bottom: 30px !important; border-bottom: 1px solid #888 !important; padding-top: 16px !important;}.product-1-sec > table:first-child .textContent{ border-bottom: 1px solid #888 !important; padding-bottom: 30px !important; }.product-1-sec > table:first-child .textContent .textContent{ border-bottom: 15px solid #000 !important; padding-top: 0px !important; border-top: 1px solid #888 !important; padding-top: 31px !important;} .product-1-sec .logo-wrap tr:first-child .textContent{padding-top: 40px !important;}.mobile-item-top-space{ padding-top: 16px !important; }.footer{ padding-bottom: 10px !important; padding-top: 25px !important; } .inline-br{ content: ''; display: none !important;} .inline-br:after{content: '';} .mobile-has-top-border{border-top: 1px solid #888 !important; padding-top: 31px !important;}.mobile-has-bottom-border{ padding-bottom: 30px !important; border-bottom: 1px solid #888 !important; }/*////// CLIENT-SPECIFIC STYLES //////*/ body{width:100% !important; min-width:100% !important;}/* Force iOS Mail to render the email at full width. */ /*////// FRAMEWORK STYLES //////*/ /* CSS selectors are written in attribute selector format to prevent Yahoo Mail from rendering media query styles on desktop. */ table[id="emailBody"], table[class="flexibleContainer"]{width:100% !important;}/* The following style rule makes any image classed with 'flexibleImage' fluid when the query activates. Make sure you add an inline max-width to those images to prevent them from blowing out. */ img[class="flexibleImage"]{height:auto !important; width:100% !important;}/* Make buttons in the email span the full width of their container, allowing for left- or right-handed ease of use. */ table[class="emailButton"]{width:100% !important;}td[class="buttonContent"]{padding:0 !important;}td[class="buttonContent"] a{padding:15px !important;}td[class="textContentLast"],td[class="product-sec"] td[class="imageContentLast"]{padding-top:20px !important;}/*////// GENERAL STYLES //////*/ td[id="bodyCell"]{padding-top:10px !important; padding-Right:10px !important; padding-Left:10px !important;}.hide-in-mobile{display: none !important;}.show-in-mobile{display: inline-block !important; margin: 0 auto !important;}*[class="show"] {overflow: visible !important;float: none !important;display: block !important;line-height:100% !important;}</style><!--
Outlook Conditional CSS
These two style blocks target Outlook 2007 & 2010 specifically, forcing
columns into a single vertical stack as on mobile clients. This is
primarily done to avoid the 'page break bug' and is optional.
More information here:
http://templates.mailchimp.com/development/css/outlook-conditional-css
--><!--[if mso 12]>
<style type="text/css">
.flexibleContainer{display:block !important; width:100% !important;}
</style>
<![endif]--><!--[if mso 14]>
<style type="text/css">
.flexibleContainer{display:block !important; width:100% !important;}
</style>
<![endif]--></head><body style="margin: 0;padding: 0;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #232323;height: 100% !important;width: 100% !important"><center><table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;margin: 0;padding: 0;background-color: #232323;height: 100% !important;width: 100% !important"><tr><td align="center" valign="top" id="bodyCell" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;margin: 0;padding: 0;padding-top: 20px;padding-bottom: 20px;height: 100% !important;width: 100% !important"><table border="0" cellpadding="0" cellspacing="0" width="600" id="emailBody" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #000"><tr><td align="center" valign="top" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%"><table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%"><tr><td align="center" valign="top" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%"><table border="0" cellpadding="0" cellspacing="0" width="600" class="flexibleContainer" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%"><tr><td class="product-1-sec" valign="top" width="600" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%"><table align="Left" border="0" cellpadding="0" cellspacing="0" width="196" class="flexibleContainer" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%"><tr><td valign="top" class="textContent" style="border: 15px solid #000;text-align: center;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #404040;font-family: Helvetica;font-size: 16px;line-height: 125%;padding-bottom: 20px"><table border="0" cellpadding="0" cellspacing="0" width="100%" class="flexibleContainer" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%"><tr><td valign="top" class="textContent" style="text-align: center;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #404040;font-family: Helvetica;font-size: 16px;line-height: 125%"><div style="color: #fff; text-align: center"><div style="font-size: 14px; line-height: 1em; border-bottom: 5px solid #000; border-top: 15px solid #000">Receive</div><div style="font-size: 26px; line-height: 1em; color: #f5d18d; border-bottom: 17px solid #000">500</div><div style="font-size: 11px; line-height: 1.2em; color: #fff; border-bottom: 18px solid #000">Lorem ipsum dolor<br class="inline-br">sit amet, consectetur<br class="inline-br">adipisicing elit. In</div><div style="font-size: 11px; line-height: 1.2em; color: #fff">veniam id totam, esse<br class="inline-br">laboriosam dolores<br class="inline-br">fugiat, ducimus enim<br><br></div></div></td></tr><tr><td valign="top" style="text-align: center;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%"><a href="http://www.google.com/" style="-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #2C9AB7;text-decoration: underline"><img style="max-width: 100%;border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic" src="http://theprojectstagingserver.com/shazam/img/email/btn-buy-now-small_2x.jpg" width="115" alt="Buy Now"></a></td></tr></table></td><td valign="top" width="2px" class="hide-in-mobile divider" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%; background-color: #000"><img style="max-width: 100%;border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;display: block" src="http://theprojectstagingserver.com/shazam/img/email/h-divider.png" width="2px"></td></tr></table><table align="Right" border="0" cellpadding="0" cellspacing="0" width="394" class="flexibleContainer" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%"><tr><td valign="top" class="textContent" style="text-align: center;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #404040;font-family: Helvetica;font-size: 16px;line-height: 125%"><table align="Left" border="0" cellpadding="0" cellspacing="0" width="189" class="flexibleContainer" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%"><tr><td valign="top" class="product-sec" style="border: 15px solid #000;text-align: center;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #404040;font-family: Helvetica;font-size: 16px;line-height: 125%;padding-bottom: 20px"><table border="0" cellpadding="0" cellspacing="0" width="100%" class="flexibleContainer" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%"><tr><td valign="top" class="textContent" style="text-align: center;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #404040;font-family: Helvetica;font-size: 16px;line-height: 125%"><div style="color: #fff; text-align: center"><div style="font-size: 14px; line-height: 1em; border-bottom: 5px solid #000; border-top: 15px solid #000">Receive</div><div style="font-size: 26px; line-height: 1em; color: #f5d18d; border-bottom: 17px solid #000">500</div><div style="font-size: 11px; line-height: 1.2em; color: #fff; border-bottom: 18px solid #000">Lorem ipsum dolor<br class="inline-br">sit amet, consectetur<br class="inline-br">adipisicing elit. In</div><div style="font-size: 11px; line-height: 1.2em; color: #fff">veniam id totam, esse<br class="inline-br">laboriosam dolores<br class="inline-br">fugiat, ducimus enim<br><br></div></div></td></tr><tr><td valign="top" style="text-align: center;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%"><a href="http://www.google.com/" style="-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #2C9AB7;text-decoration: underline"><img style="max-width: 100%;border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic" src="http://theprojectstagingserver.com/shazam/img/email/btn-buy-now-small_2x.jpg" width="115" alt="Buy Now"></a></td></tr></table></td></tr></table><table align="Right" border="0" cellpadding="0" cellspacing="0" width="190" class="flexibleContainer" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%"><tr><td valign="top" width="2px" class="hide-in-mobile" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%; background-color: #000"><img style="max-width: 100%;border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic" src="http://theprojectstagingserver.com/shazam/img/email/h-divider.png" width="2px"></td><td valign="top" class="product-sec" style="border: 15px solid #000; text-align: center;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #404040;font-family: Helvetica;font-size: 16px;line-height: 125%;padding-bottom: 20px"><table border="0" cellpadding="0" cellspacing="0" width="100%" class="flexibleContainer" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%"><tr><td valign="top" class="textContent" style="text-align: center;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #404040;font-family: Helvetica;font-size: 16px;line-height: 125%"><div style="color: #fff; text-align: center"><div style="font-size: 14px; line-height: 1em; border-bottom: 5px solid #000; border-top: 15px solid #000">Receive</div><div style="font-size: 26px; line-height: 1em; color: #f5d18d; border-bottom: 17px solid #000">500</div><div style="font-size: 11px; line-height: 1.2em; color: #fff; border-bottom: 18px solid #000">Lorem ipsum dolor<br class="inline-br">sit amet, consectetur<br class="inline-br">adipisicing elit. In</div><div style="font-size: 11px; line-height: 1.2em; color: #fff">veniam id totam, esse<br class="inline-br">laboriosam dolores<br class="inline-br">fugiat, ducimus enim<br><br></div></div></td></tr><tr><td valign="top" style="text-align: center;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%"><a href="http://www.google.com/" style="-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #2C9AB7;text-decoration: underline"><img style="max-width: 100%;border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic" src="http://theprojectstagingserver.com/shazam/img/email/btn-buy-now-small_2x.jpg" width="115" alt="Buy Now"></a></td></tr></table></td></tr></table></td></tr></table></td></tr></table></td></tr></table></td></tr><tr><td align="center" valign="top" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%"><table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%"><tr><td align="center" valign="top" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%"><table border="0" cellpadding="0" cellspacing="0" width="600" class="flexibleContainer" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%"><tr><td align="center" valign="top" width="600" class="footer" style="padding-top: 20px;text-align: right;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;padding-right: 20px;padding-left: 20px"><table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%"><tr><td valign="top" class="textContent" style="text-align: right;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #404040;font-family: Helvetica;font-size: 16px;line-height: 125%;padding-bottom: 20px"><a href="http://www.google.com/" style="text-decoration: none;color: #fff;text-align: right;font-size: 9px;line-height: 1em;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%">Terms & Conditions apply*</a></td></tr></table></td></tr></table></td></tr></table></td></tr></table></td></tr></table></center></body></html>