Hello dear web developers!
I have a problem with email displaying in Outlook clients on mobile phones, and even on Outlook on my desktop PC.
When I receive my email in Outlook and open it in IE, I try to resize it and when it comes to the breaking point where it needs to switch to @media screen, it all breaks. It happens in almost every outlook client on mobile phones.
Here's the thing. When I press F12 on that email that is opened in IE, I see that my inline style for width is crossed out and .col class is in effect. But it still isn't showing the email correctly and responsively. This only happens in outlook. Any idea how to fix it?
Here is the part of the code:
<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>
