Outlook 14 iOS rendering issues - html

Question

hello longtime lurker first time asker - im having an issue with outlook 14 on iOS. I send a test send and it begins to render the mobile view as it should look then it gets to a point and sizes everything down as if its desktop. coupla code blocks for reference:
<table align="center" border="0" cellpadding="0" cellspacing="0" class="wrapper" style="width:600px;" width="600">
<tr>
<td align="center" bgcolor="#EAE6DD" height="auto" style="background-size:cover;height:auto; background-position:center;" valign="middle">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<!-- IMAGES AND TEXT SIT WITHIN THIS AREA -->
<tr>
<td align="center" class="hide" style="width:600px;" valign="top" width="600">
<img alt="Hey! you've earned this - enjoy a burg on us!" border="0" src="https://image.email.grilld.com.au/lib/fe3915707564067c721778/m/1/Taken_GIF_v2.gif" style="display:block;font-family:Arial, sans-serif;color:#ffffff;font-weight:bold;font-size:24px;max-width:600px;" width="600"></td><!--[if !mso 9]><!--><td align="center" valign="top">
<div class="mobile_show" style="display:none;width:0;overflow:hidden;max-height:0!important">
<table align="center" border="0" cellpadding="0" cellspacing="0" class="wrapper" width="100%">
<tr>
<td align="center" style="width:600px;" valign="top" width="600">
<img alt="Hey! you've earned this - enjoy a burg on us!" border="0" height="auto" src="https://image.email.grilld.com.au/lib/fe3915707564067c721778/m/1/Taken_GIF_mobile_v2.gif" style="display:block;font-family:Arial, sans-serif;color:#ffffff;font-weight:bold;font-size:24px;max-width:600px;" width="100%"></td></tr></table></div></td><!--<![endif]--></tr><!-- IMAGES AND TEXT SIT WITHIN THIS AREA --></table></td></tr></table><!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]--></td></tr></table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="wrapper" style="width: 600px;" width="600">
<tr>
<td align="center" bgcolor="#EAE6DD" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="width: 30px;" width="30">
</td><td align="center" valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0" class="intro_width_mobile">
<tr>
<td height="20" style="height:20px; line-height:1px; font-size:1px;">
</td></tr><tr>
<td align="center" class="black" style="color:#000000; font-family:'Custom Font 1','Helvetica Neue',Helvetica, Arial, sans-serif; font-size:16px; line-height:21px; width:100%; max-width:464px; margin:0 auto; Margin:0 auto" valign="top" width="100%">
There's more where that came from, so stop by again soon.<br>
<br>
Burg apetit!<br>
</td></tr><tr>
<td height="20" style="height:20px; line-height:1px; font-size:1px;">
</td></tr></table></td><td style="width:30px;" width="30">
</td></tr></table></td></tr></table>
TIA for your help

Answer 1

Outlook apps try and 'fix' your large images by adding a max-width:100% to their CSS. But if you use e.g. max-width:600px as you are, it will be overridden. You can overwrite this by using max-width:600px!important inline (or an id on your body, e.g. #body .myimage {max-width:600px!important}).
Alternatively, you could rely on width:100%, which you don't have on your first image.
That's probably the trigger (big images or tables which it can't resize properly). Let us know if that doesn't solve it.