Reading here https://litmus.com/community/discussions/8256-outlook-app-vs-dark-mode-on-ios-a-disaster I think you're out of luck because you can't target elements with a colour set.
Started a new discussion: AMP for Email carousel
The issue seems fixed for me (for images at least). Can you confirm?
The issue seems fixed for me (for images at least). Can you confirm?
More here https://litmus.com/community/discussions/7248-gmail-app-android-not-scaling-images-correctly-anymore
No fix yet as of yet. I'm still keeping my fingers crossed that Google will fix it.
I've had more and more clients complaining about it this last week, but no everyone is seeing the issue. It's very odd.
Other then removing the height from images etc (which isn't a solution for me, because my clients use mail tools that automatically adds height in pixels in images once they update them) there's no fix yet.
Could you post your code so I/we can take a look?
This should do the trick (also changed the width=[number]px to width=[number] as Outlook can't read width=300px or bgcolours with just 3 letters/numbers/
<!-- FULL WIDTH CONTAINER -->
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="center"><!-- 600px CONTAINER -->
<table width="600" cellspacing="0" cellpadding="0" border="0" class="responsive-table">
<tr>
<td bgcolor="gold" align="center" style="font-size: 50px; padding: 20px;"> HEADER </td>
</tr>
<tr>
<td bgcolor="yellow" align="center" style="font-size: 20px; padding: 5px;"> NAV BAR </td>
</tr>
<tr>
<td bgcolor="lightblue" align="center" style="font-size: 50px; padding: 20px;"> HEADLINE </td>
</tr>
<tr>
<td><!--[if mso ]><table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="300"><![endif]--><!-- Image 1 -->
<table width="300" height="450" align="left" cellspacing="0" cellpadding="0" border="0" class="responsive-table2">
<tr>
<td><img src="http://cdn.proco.com/public/images/proco/6.jpg" width="300" height="450" class="responsive-image" style="vertical-align: middle;"/></td>
</tr>
</table>
<!--[if mso ]></td>
<td width="300"><![endif]--><!-- Text 1 -->
<table width="300" height="450" align="right" cellspacing="0" cellpadding="0" border="0" class="responsive-table2">
<tr>
<td bgcolor="#111111" style="padding: 15px; color: white;">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</td>
</tr>
</table>
<!--[if mso ]></td>
</tr>
</table>
<table width="100%" cellspacing="0" cellpadding="0" border="0" dir="rtl">
<tr>
<td width="300" dir="ltr"><![endif]--><!-- Image 2 -->
<table width="300" height="450" align="right" cellspacing="0" cellpadding="0" border="0" class="responsive-table2">
<tr>
<td><img src="http://cdn.proco.com/public/images/proco/6.jpg" width="300" height="450" class="responsive-image" style="vertical-align: middle;"/></td>
</tr>
</table>
<!--[if mso ]></td>
<td width="300" dir="ltr"><![endif]--><!-- Text 2 -->
<table width="300" height="450" align="left" cellspacing="0" cellpadding="0" border="0" class="responsive-table2">
<tr>
<td bgcolor="#111111" style="padding: 15px; color: white;">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</td>
</tr>
</table>
<!--[if mso ]></td>
</tr>
</table><![endif]--></td>
</tr>
<tr>
<td bgcolor="gold" align="center" style="font-size: 50px; padding: 20px;"> FOOTER </td>
</tr>
</table></td>
</tr>
</table>
The most important reason for not using width:100% is because the editor the mails are created in adds the width and height in pixels automatically. Other reason would be that width 100% with retina images would cause problems in Outlook 2007-2016.