Hallo liebe Webentwickler!Responsive HTML E-Mails
Ich habe ein Problem mit der E-Mail-Anzeige in Outlook-Clients auf Mobiltelefonen und sogar auf Outlook auf meinem Desktop-PC.
Wenn ich meine E-Mail in Outlook erhalte und sie im Internet Explorer öffne, versuche ich die Größe zu ändern und wenn es zu dem Punkt kommt, an dem es zum @media-Bildschirm wechseln muss, bricht alles zusammen. Es passiert in fast jedem Outlook-Client auf Mobiltelefonen.
Hier ist die Sache. Wenn ich F12 auf der E-Mail drücke, die in IE geöffnet wird, sehe ich, dass mein Inline-Stil für die Breite durchgestrichen ist und die .col-Klasse in Kraft ist. Aber es zeigt immer noch nicht die E-Mail richtig und ansprechend. Dies geschieht nur in Outlook. Irgendeine Idee, wie man es repariert? Hier
ist der Teil des Codes:
<style>
@media screen and (max-width: 525px) {
/* FLUID TABLES */
.wrapper {
width: 100% !important;
max-width: 100% !important;
}
/*COLUMNS TO ROWS */
.col {
display: block!important;
width: 100%!important;
border: none!important;
}
.img-max {
max-width: 100% !important;
width: 100% !important;
height: auto !important;
}
.wide {
width: 100% !important;
}
}
</style>
<table style="padding-top: 0px;padding-right: 15px;padding-bottom: 0px;padding-left: 15px;table-layout: auto;" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="padding-top: 0px;padding-right: 15px;padding-bottom: 20px;padding-left: 15px; background-color: rgb(255, 255, 255);" class="section-pad" align="center">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="700">
<tr>
<td align="center" valign="top" width="700">
<![endif]-->
<table style="max-width: 700px;table-layout: auto;" class="wide" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="background-color: rgb(236, 242, 248);">
<!-- HERO IMAGE -->
<table style="table-layout: auto; background-color: rgb(236, 242, 248); width: 92%;" border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
<tbody>
<tr>
<td class="col" align="center" valign="top" style="width: 65%; padding-left: 0px; background-color: rgb(236, 242, 248);">
<table style="table-layout: auto; background-color: white; padding-left: 10px; padding-right: 10px;" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="padding-top: 15px;padding-right: 20px;padding-bottom: 0;padding-left: 20px;font-size: 26px;line-height: 30px;font-weight:400; font-family: Arial, sans-serif; color: #0056a6;" align="left"><img src="/resources/handlers/dcimage.ashx" style="height: auto; display: inline;" border="0">,</td>
</tr>
<tr>
<td style="padding-top: 15px;padding-right: 20px;padding-bottom: 20px;padding-left: 20px; font-size: 14px; font-weight:normal; line-height: 14px; font-family: Arial, sans-serif; color: #2d353d;" align="left">
LOREM IPSUM
</td>
</tr>
</tbody>
</table>
</td>
<td style="background-color: rgb(236, 242, 248); width: 35%; padding-right: 0px;" class="col" align="center" valign="top">
<p valign="middle" style="line-height: 40px; font-size: 12px; color: white; font-family: Arial, sans-serif; background-color: rgb(0, 86, 166);">
In case you need to contact us</p>
<img src="/r1.jpg" alt="telephone" class="img-max" border="0" height="50" width="240">
<img src="/r2.jpg" alt="skype" class="img-max" border="0" height="50" width="240">
<img src="/r3.jpg" alt="mail" class="img-max" border="0" height="50" width="240">
<img src="/r4.jpg" alt="web" class="img-max" border="0" height="50" width="240">
</td>
</tr>
<tr>
<td class="col" align="center" valign="top" style="width: 65%;">
<img src="/r2.jpg" class="img-max">
</td>
<td style="background-color: rgb(236, 242, 248); width: 35%;" class="col" align="center" valign="top"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
Nur zu beachten, dass, wenn ich die Col-Klasse von meinem TD entfernen, alles gut ist, aber reaktionsschnelle Teil ist nicht gut: D Sollte ich Outlook so verhalten, wie es will? – bocasa