2 Column Responsive Email in Outlook 2007, 2010
Question
I'm trying to keep these images side by side, in both desktop and mobile, and it's not working in Outlook 2007, 2010, etc. There is a large gap between the two columns containing images, and the images expand outside the set width I created. It works in every other ESP, except older versions of Outlook (of course). Can you tell me what I'm doing wrong?
<!DOCTYPE html>
<html>
<head>
<title>Email</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style>
body, table, td, a{-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;} /* Prevent WebKit and Windows mobile changing default text sizes */
table, td{mso-table-lspace: 0pt; mso-table-rspace: 0pt;} /* Remove spacing between tables in Outlook 2007 and up */
img{-ms-interpolation-mode: bicubic;} /* Allow smoother rendering of resized image in Internet Explorer */
img{border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none;}
table{border-collapse: collapse !important; width: 100% !important; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; align-items: center;}
td {border-collapse: collapse !important;}
body{height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important;}
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
@media screen and (max-width: 525px) {
.header-img1 {
max-width: 425px !important;
width: 100% !important;
height: auto !important;
}
.header-img2 {
max-width: 175px !important;
width: 100% !important;
height: auto !important;
}
.header-td {
max-width: 425px !important;
width: auto !important;
height: auto !important;
padding: 0px !important;
margin: 0px !important;
}
}
<!--[if (gte mso 9)|(IE)]>
<table border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="left" valign="bottom" width="600">
<![endif]-->
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width: 600px;">
<tr>
<td align="left" valign="bottom">
<table cellpadding="0" cellspacing="0" border="0" width="600" style="max-width: 600px; width: 600px;">
<tr>
<td align="left" valign="bottom" width="70%" style="max-width: 425px;" class="header-td">
<a href="#" target="_blank">
<img src="" style="display: block; width: 425px;" alt="" class="header-img1"></a>
</td>
<td align="left" valign="bottom" width="30%" style="max-width: 175px;" class="header-td">
<a href="#" target="_blank">
<img src="" alt="" style="display: block; width: 175px;" class="header-img2"></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
2 answers
solution1
0 2018-08-22 07:58:33
Media query will not work with outlook. you should try table structure where your images should be in separate td in a single row having the valign="top"
This will work.
solution2
0 ACCPTED 2018-08-22 08:00:08
The issue is coming from your css. You've set width to 100% and important, so it's overriding your fixed 600px widths. This alongside Outlook not supporting max-width is what's making your tables expand to full width.
table{border-collapse: collapse !important; width: 100% !important; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; align-items: center;}
Just remove the width: 100% !important and you'll be good to go. Also align-items: center should be removed, as it's part of flexbox and has zero support in emails. If you want your tables to be aligned center, then add align="center" as an attribute to the table (or on a td to center align within that).
Another minor thing, you might want to change the td widths to a fixed width that matches your image width.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.