Create a Discussion

Outlook 2013 only displays partial image

Matt Becker posted 2017-12-18 20:04:05

Hey so Outlook 2013 is only displaying a small sliver of images. Works fine in all other clients.

I have attached screenshots.

This is a new template, but I have never seen this before. Any styles or anything that you think might be causing this?

Outlook 2013: http://image.connect.americanpublicmedia.org/lib/fe6015707c62017f7712/m/1/4cad6782-ee70-4ab9-9969-4f494f7e9116.jpg

All other clients: http://image.connect.americanpublicmedia.org/lib/fe6015707c62017f7712/m/1/28de2e7b-8bf5-48c3-8f32-1569999ab30c.jpg

Angel Ordax replied 2018-03-23 14:57:28

Hey @MattBecker, the problem is the use of mso-line-height-rule, I run into the same issue today and I found your post trying to find an answer, in the end only lots of hours of testing gave me the answer.

Don't use mso-line-height-rule globally, use it instead only for sections where you will input text, for some reason when Outlook fins that property forces images to be the height of the default line-height. Here's a link to a test I did on Outlook 2013 with your code pasting one version without the property and the original below: https://imgur.com/a/G6x9y

Reply to Angel Ordax

Matt Becker replied 2017-12-18 20:51:03

Here's the code:

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="x-apple-disable-message-reformatting"> 
<title>Announcement - [Plain HTML]</title>

<style>

/* What it does: Remove spaces around the email design added by some email clients. /
/ Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}

/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}

/* What it does: Centers email on Android 4.4 /
div[style="margin: 16px 0"] {
margin:0 !important;
}

/* What it does: Stops Outlook from adding extra spacing to tables. */
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}

/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}

/* What it does: Uses a better rendering method when resizing images in IE. */
img {
-ms-interpolation-mode:bicubic;
}

/* What it does: A work-around for email clients meddling in triggered links. /
*[x-apple-data-detectors], / iOS /
.x-gmail-data-detectors, / Gmail */
.x-gmail-data-detectors *,
.aBn {
border-bottom: 0 !important;
cursor: default !important;
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}

/* What it does: Prevents Gmail from displaying an download button on large, non-linked images. /
.a6S {
display: none !important;
opacity: 0.01 !important;
}
/ If the above doesn't work, add a .g-img class to any image in question. */
img.g-img + div {
display:none !important;
}

/* What it does: Prevents underlining the button text in Windows 10 */
.button-link {
text-decoration: none !important;
}

/* What it does: Removes right gutter in Gmail iOS app: https://github.com/TedGoas/Cerberus/issues/89 /
/ Create one of these media queries for each additional viewport size you'd like to fix /
/ Thanks to Eric Lepetit @ericlepetitsf) for help troubleshooting /
@media only screen and (min-device-width: 375px) and (max-device-width: 413px) { / iPhone 6 and 6+ */
.email-container {
min-width: 375px !important;
}
}

</style>

<style>

/* What it does: Hover styles for buttons */
.button-td,
.button-a {
transition: all 100ms ease-in;
}
.button-td:hover,
.button-a:hover {
background: #474C55 !important;
border-color: #474C55 !important;
}

/* Media Queries */
@media screen and (max-width: 480px) {

/* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */
.fluid {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}

/* What it does: Forces table cells into full-width rows. /
.stack-column,
.stack-column-center {
display: block !important;
width: 100% !important;
max-width: 100% !important;
direction: ltr !important;
}
/ And center justify these ones. */
.stack-column-center {
text-align: center !important;
}

/* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
.center-on-narrow {
text-align: center !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
}
table.center-on-narrow {
display: inline-block !important;
}

/* What it does: Adjust typography on small screens to improve readability /
.email-container p {
font-size: 17px !important;
line-height: 22px !important;
}
/ iOS BLUE LINKS */
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;
}

/* USE THESE CLASSES TO HIDE CONTENT ON MOBILE */
td[class="mobile-hide"] {
display: none;
}
img[class="mobile-hide"] {
display: none !important;
}
img[class="img-max"] {
max-width: 100% !important;
height: auto !important;
}
}

</style>

</head>
<body width="100%" bgcolor="#F1F1F1" style="margin: 0; mso-line-height-rule: exactly;">
<center style="width: 100%; background: #F1F1F1; text-align: left;">

<div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: sans-serif;">
Given the rapid economic, demographic, and political changes that the state has been through in recent years, MPR News wanted to better understand what is on the minds of Minnesotans. What divides us? What unites us? What are our common aspirations now in 2017? We explored these questions in the 2017 Ground Level Survey of Minnesotans.
</div>

<div style="max-width: 680px; margin: auto;" class="email-container">

<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 680px;" class="email-container">

<tr>
<td bgcolor="#ffffff">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 0px 0px 0px 0px; text-align: center;" align="center">
<img class="" src="http://image.connect.americanpublicmedia.org/lib/fe6015707c62017f7712/m/1/03f1c994-7685-4607-bfc7-40b97ca00988.png" width="100%" height="" alt="APM Research Lab" border="0" style="height: auto; font-family: sans-serif; font-size: 15px; line-height: 0px; color: #555555;">
</td>
</tr>
</table>
</td>
</tr>

<tr>
<td bgcolor="#dfe1df">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 0px 0px 0px 0px; text-align: center;" align="center">
<a href="https://www.apmresearchlab.org/stories/2017/11/13/ground-level"> <img class="img-max" src="http://image.connect.americanpublicmedia.org/lib/fe6015707c62017f7712/m/1/46b8807d-eadd-4da8-92f1-719aa4752fdb.png" width="100%" height="" alt="APM Research Lab" border="0" style="height: auto; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;"></a><span style="font-size:10px; font-family: Helvetica, arial, sans-serif; color:#6E6E6E">Photo by Jerry Huddleston from Hampton, Minnesota, US (CP 287 – Maple Springs), via <a style="color:#6E6E6E" href="https://commons.wikimedia.org/wiki/File%3ACP_287_-_Maple_Springs_(15328454870).jpg">Wikimedia Commons</a></span>
</td>
</tr>
<tr>
<td class="padding-copy" style="padding: 0px 25px 0px; color: rgb(102, 102, 102); line-height: 25px; font-family: Helvetica,Arial,sans-serif; font-size: 16px; border-style: none;" align="center">

<p>

<a style="color:rgb(102, 102, 102); text-decoration: none;" href="https://www.apmresearchlab.org/stories/2017/11/13/ground-level"> In partnership with MPR News, we asked a representative sample of more than 1,650 Minnesotans — from the Twin Cities and throughout Greater Minnesota and major regional centers — what they think about everything from their own personal finances to the future of our state. Their responses provide insights on jobs, health care, immigration, politics, and much more. We have unearthed some interesting findings, many which have been covered in a series of stories by MPR News.</a> </p>

</td>
</tr>
<tr>
<td class="" align="center">
<a alias="" class="button-a" href="https://www.classicalmpr.org/story/2017/12/05/saint-paul-chamber-orchestra-handels-messiah" style="border-width: 15px 25px; border-style: solid; border-color: #b5121b; border-radius: 3px; color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 18px; font-weight: normal; text-decoration: none; display: inline-block; background-color: #b5121b; -webkit-border-radius: 3px; -moz-border-radius: 3px;" target="_blank"><strong>Learn More</strong></a><br><br>
</td>
</tr>

<tr>
<td bgcolor="#ffffff">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 40px 40px 20px 40px; text-align: left;">
<h1 style="margin: 0; font-family: 'Montserrat', sans-serif; font-size: 20px; line-height: 26px; color: #333333; font-weight: bold;">Happy Holidays & welcome to our new newsletter!</h1>
</td>
</tr>
<tr>
<td style="padding: 0px 40px 20px 40px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #474C55; text-align: left; font-weight:normal;">
<p style="margin: 0;">We hope that you’ll find this newsletter to be the gift that keeps giving. In this case we encourage re-gifting: please pass this along to your friends and colleagues, and encourage them to <a style="color:#B5121B; text-decoration:none;" href="">subscribe</a>.<br><br>
Through this newsletter we will be bringing you the latest and greatest research findings from the APM Research Lab headquarters. We hope you’ll find it useful and engaging every time, and toward that end we challenge you to take our first quiz: <a style="color:#B5121B; text-decoration:none;" href="">APM Research Lab “10 Thing We Learned in 2017” Quiz</a>.
<br><br>

This holiday season Andi, Kassira, and I are feeling grateful to the collaboration and support we have received in the Lab’s first half year of existence.

<ul>

<li style="Margin: 10px 0 10px 0;"> We’ve benefitted from the wise counsel of many formal and informal advisors. You know who you are. Thank you!</li>

<li style="Margin: 10px 0 10px 0;">Thanks also to the Blandin Foundation, Bush Foundation, McKnight Foundation, and Knight Foundation Donor Advised Fund at The Miami Foundation for supporting our first major project (Ground Level Survey of Minnesotans).
</li>
<li style="Margin: 10px 0 10px 0;">
Several news outlets including KARE 11 TV, Southern California Public Radio, Twin Cities Business Magazine, and (most notably) MPR News have picked up our work – and they have run with it!
</li>
<li style="Margin: 10px 0 10px 0;">And thanks to those of you who are among our 300+ friends on social media (twitter and Facebook). And thanks in advance to those about to join us—please do! </li></ul>

Happy new year. We look forward to bringing more facts into focus in 2018!<br><br>– Craig

</td>
</tr>

<table width="" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" style="font-family: sans-serif; font-size:14px; line-height:20px; color:#222222; font-weight:bold;" class="body-text">
<p style="font-family: 'Montserrat', sans-serif; font-size:14px; line-height:20px; color:#222222; font-weight:bold; padding:0; margin:0;" class="body-text">Craig Helmstetter</p>

</td>

</tr>
<tr>
<td align="left" style="font-family: sans-serif; font-size:14px; line-height:20px; color:#666666;" class="body-text">
<p style="font-family: sans-serif; font-size:12px; line-height:20px; color:#666666; padding:0; margin:0;" class="body-text">Managing Partner</p>

</td>

</tr>

</table>

</td>

</tr>
</table>

</td>
</tr>

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

<tr>
<td bgcolor="#d7d8d6">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 40px 40px 20px 40px; text-align: left;">
<h1 style="margin: 0; font-family: '', sans-serif; font-size: 20px; line-height: 26px; color: #474C55; font-weight: bold;">Lab Notes</h1>
</td>
</tr>

<table role="Presentation" width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" style="border:1px solid #dddddd;">
<tr>
<td align="" style="padding: 20px 20px 0px 20px; font-family: 'Montserrat', sans-serif; font-size: 14px; line-height: 20px; color: #474C55; text-align: left; font-weight:normal;">
<h3 style="margin:0;">
<a style="color:#474C55; text-decoration:none;" href="https://www.apmresearchlab.org/stories/2017/10/12/doubling-down-on-credibility"> Doubling down on credibility</a>

</h3>

</td>

</tr>

<p style="margin:0;">
Why would a media company want to establish a research division? Not a market research division, mind you, but a unit dedicated to bringing the scientific method to better understanding the social and economic world around us?

</p>
</td>
</tr>
<tr>
<td valign="top" align="left" style="text-align: left; padding: 0px 20px 20px 20px;">

<center>
<table role="presentation" align="left" cellspacing="0" cellpadding="0" border="0" style="text-align: left;">
<tr>
<td style="border-radius: 5px; background: #b5121b; text-align: center;" class="button-td">
<a href="http://www.google.com" style="background: #b5121b; border: 15px solid #b5121b; font-family: '', sans-serif; font-size: 14px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 0px; font-weight: bold;" class="button-a">
<span style="color:#ffffff;" class="button-link"> READ MORE </span>
</a>
</td>
</tr>
</table>
</center>

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

</td>
</tr>

<tr>
<td style="padding: 0px 40px 20px 40px;">

<table width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" style="border:1px solid #dddddd;">
<tr>
<td align="" style="padding: 20px 20px 20px 20px; font-family: '', sans-serif; font-size: 14px; line-height: 20px; color: #474C55; text-align: left; font-weight:normal;">
<h3 style="margin:0;">
<a style="color:#474C55; text-decoration:none;" href="https://www.apmresearchlab.org/stories/2017/10/12/doubling-down-on-credibility">Minnesotans are feeling hopeful. Mostly.</a>
</h3>
</td>
</tr>

<tr>
<td align="left" style="padding: 0px 20px 0px 20px; font-family: 'Montserrat', sans-serif; font-size: 14px; line-height: 20px; color: #474C55; text-align: left; font-weight:normal;">
<a href="https://www.apmresearchlab.org/stories/2017/10/12/doubling-down-on-credibility"><img width = "100%" height="100%" valign="top" alt="Hope" src="http://image.connect.americanpublicmedia.org/lib/fe6015707c62017f7712/m/1/ec2a5095-0403-422b-a698-14b129ab2a69.png"></a>
</td>
</tr><tr>
<td valign="top" align="right" style="padding: 20px 20px 20px 20px; font-family: sans-serif; font-size: 14px; line-height: 20px; color: #797D82; text-align: left; font-weight:normal;">
<p style="margin:0;">
We recently partnered with Minnesota Public Radio News to conduct the wide-ranging Ground Level Survey of Minnesotans. We asked a scientifically representative sample of 1,654 Minnesotans “When you think about Minnesota, are you generally hopeful or fearful about the future?” Here are five takeaways.
</p>
</td>
</tr>
<tr>
<td valign="top" align="left" style="text-align: left; padding: 0px 20px 20px 20px;">

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

<table width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" style="border:1px solid #dddddd;">
<tr>
<td align="" style="padding: 20px 20px 0px 20px; font-family: 'Montserrat', sans-serif; font-size: 14px; line-height: 20px; color: #474C55; text-align: left; font-weight:normal;">
<h3 style="margin:0;">
<a style="color:#474C55; text-decoration:none;" href="https://www.apmresearchlab.org/stories/2017/10/12/doubling-down-on-credibility">Progress on the pay gap between male and female full-time workers in Minnesota</a>
</h3>
</td>
</tr>

<tr>
<td align="" style="padding: 20px 20px 0px 20px; font-family: 'Montserrat', sans-serif; font-size: 14px; line-height: 20px; color: #474C55; text-align: left; font-weight:normal;">
<a href="https://www.apmresearchlab.org/stories/2017/10/12/doubling-down-on-credibility"><img width="100%" alt="The Pay gap" src="http://image.connect.americanpublicmedia.org/lib/fe6015707c62017f7712/m/1/9e6fbe84-cd34-40d7-9b04-1123a54bde25.png"></a>
</td>
</tr><tr>
<td align="" style="padding: 20px 20px 20px 20px; font-family: sans-serif; font-size: 14px; line-height: 20px; color: #797D82; text-align: left; font-weight:normal;">
<p style="margin:0;">
For Minnesota, 2016 brought greater gender parity in worker earnings than any other year this decade or the last. Among full-time, year-round workers, women earned 83 cents for every dollar earned by men (median earnings). This is a nickel more than the scenario in 2010.
</p>
</td>
</tr>
<tr>
<td valign="top" align="left" style="text-align: left; padding: 0px 20px 20px 20px;">

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

</td>
</tr>

<table width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" style="border:1px solid #dddddd;">
<tr>
<td align="" style="padding: 20px 20px 0px 20px; font-family: 'Montserrat', sans-serif; font-size: 14px; line-height: 20px; color: #474C55; text-align: left; font-weight:normal;">
<h3 style="margin:0;">
<a style="color:#474C55; text-decoration:none;" href="https://www.apmresearchlab.org/stories/2017/10/12/doubling-down-on-credibility">Data Literacy 101: Did enrollment drop in Rhode Island’s private preschools?</a>
</h3>
</td>
</tr>

<tr>
<td align="" style="padding: 20px 20px 0px 20px; font-family: 'Montserrat', sans-serif; font-size: 14px; line-height: 20px; color: #474C55; text-align: left; font-weight:normal;">
<a href="https://www.apmresearchlab.org/stories/2017/10/12/doubling-down-on-credibility"><img width="100%" alt="The Pay gap" src="http://image.connect.americanpublicmedia.org/lib/fe6015707c62017f7712/m/1/da59fb26-d02b-401a-9cc9-fa3e452aca74.png"></a>
</td>
</tr>
<tr>
<td align="" style="padding: 20px 20px 20px 20px; font-family: sans-serif; font-size: 14px; line-height: 20px; color: #797D82; text-align: left; font-weight:normal;">
<p style="margin:0;">
Of all Rhode Island children enrolled in preschool, the percent in private settings dropped five percentage points between 2015 and 2016. Or did it? When a change is “statistically significant,” we can be reasonably confident that the change is real. We use statistics to help us understand an entire population from a sample. Think of a pot of chicken noodle soup. Assuming the pot is well-stirred, you can make a pretty good estimate based on one ladle of soup.
</p>
</td>
</tr>
<tr>
<td valign="top" align="left" style="text-align: left; padding: 0px 20px 20px 20px;">

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

</td>
</tr>

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

<tr>
<td bgcolor="#d7d8d6">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 0px 40px 20px 40px; text-align: left;">
<h1 style="margin: 0; font-family: '', sans-serif; font-size: 20px; line-height: 26px; color: #474C55; font-weight: bold;">Social Media Shout Out</h1>
</td>
</tr>
<tr>
<td style="padding: 0px 40px 20px 40px;">

“It is wonderful to see the incredible data/insights you are putting out there including on rural MN, where we work. Thank you!” – Caryn Mohr, <a style="color:#B5121B; text-decoration:none;" href="https://www.extension.umn.edu/rsdp/">University of Minnesota Extension program on Regional Sustainable Development Partnerships</a> (@RSDPUMN)

</td>
</tr>
</table></td></tr></table>
</td></tr> 
<tr>
<td bgcolor="#ffffff">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 40px 40px 5px 40px; text-align: center;">
<h1 style="margin: 0; font-family: 'Montserrat', sans-serif; font-size: 20px; line-height: 24px; color: #000; font-weight: bold;">Connect with the APM Research Lab</h1>
</td>
</tr>
<tr>
<td style="padding: 0px 40px 20px 40px; font-family: sans-serif; font-size: 17px; line-height: 23px; color: #cccccc; text-align: center; font-weight:normal;">
<p style="margin: 0;"></p>
</td>
</tr>
<tr>
<td valign="middle" align="center" style="text-align: center; padding: 0px 20px 40px 20px;">

<table role="presentation" align="center" cellspacing="0" cellpadding="0" border="0" class="center-on-narrow">
<tr>
<td style="border-radius: 5px; background: #474C55; text-align: center;" class="button-td">
<a href="https://www.facebook.com/APMResearch/" style="background: #474C55; border: 15px solid #474C55; font-family: '', sans-serif; font-size: 14px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 0px; font-weight: bold;" class="button-a">
<span style="color:#ffffff;" class="button-link">    Facebook    </span>
</a>
</td>
<td>

</td>
<td style="border-radius: 5px; background: #474C55; text-align: center;" class="button-td">
<a href="https://twitter.com/APMresearch" style="background: #474C55; border: 15px solid #474C55; font-family: '', sans-serif; font-size: 14px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 0px; font-weight: bold;" class="button-a">
<span style="color:#ffffff;" class="button-link">     Twitter     </span>
</a>
</td>

</tr>

</table>

</td>
</tr>

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

<tr>
<td bgcolor="#474c55">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 30px 30px; text-align: center;">

</tr>
</table>

</td>
</tr>

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

<div align="Center">

<table border="0" cellpadding="0" cellspacing="0" style="text-align:center;" width="350">
<tbody>
<tr>
<td>
<br>
<div style="text-align:left;font-family: Helvetica, Arial, sans-serif;font-size:15px;line-height:1.34;color:#555;margin:16px;">

<p style="font-size: 10px;text-align:left;">
<span style="font-family: Verdana, Arial, Helvetica, sans-serif; ">
<a style="color:#B5121B; text-decoration:none;" href="%%profile_center_url%%" alias="Update Profile">Update Profile</a> ❘
<a style="color:#B5121B; text-decoration:none;" href="%%=redirectto(concat(CloudPagesURL(278),'&mid=', memberid))=%%" alias="Manage Subscriptions">Preference Center</a> ❘
<a style="color:#B5121B; text-decoration:none;" href="%%unsub_center_url%%" alias="Unsubscribe">Unsubscribe</a></span>
</p>
<p style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; text-align:left;">This email was sent by:
<b>%%Member_Busname%%
</b>
<br>%%Member_Addr%% %%Member_City%%, %%Member_State%%, %%Member_PostalCode%%
</p>
<custom name="opencounter" type="tracking"/>
<img src="https://pixel.app.returnpath.net/pixel.gif?r=18183ea475d39a989e9504c2e41bc0cd3e070b8e" width="1" height="1" />
<img src="https://pixel.inbox.exacttarget.com/pixel.gif?r=18183ea475d39a989e9504c2e41bc0cd3e070b8e" width="1" height="1" />
</div>
</td>
</tr>
</tbody>
</table>
</div>

</table>

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

</center>

</body>
</html>

Reply to Matt Becker

Janusz Golej replied 2018-01-02 14:15:01

i would first of all remove all the empty height="" attributes from you image tags.
no guarantee, only the first impression...

Amanda Ball replied 2018-01-02 14:37:15

You can try adding a desktop height in the <img> and closest outer <td>
then add a class to that <td> so it shrinks to the mobile size with an auto height. something similar to

*[class="mobile_width_320"] {
width: 320px !important;
height: auto !important;
}

Angel Ordax replied 2018-03-23 14:54:58

Outlook 2013 only displays partial image

Sign in to Community

Join the Litmus Community

Sign up to Community

Get more out of your Litmus account

Forgot password