try to use box-sizing:border-box with clear:both
check the snippet:
@media screen and (max-width: 800px) {
td {
display:block;
box-sizing:border-box;
clear:both;
}
}<table class="main" width="700" align="center" cellpadding="0" cellspacing="0" border="0" style="background: #fff;margin:auto !important">
<tbody>
<tr class="res-block">
<td style="background: #ff9400;">hello</td>
<td style="background: #ff9400;">john</td>
</tr>
</tbody>I found it! Simply change the td to th, then this stacks correctly on Outlook mobile.
Great hack if anyone is looking for it!
I have an HTML email with standard TD’s side by side. However, on mobile I want these to stack. I have used display:block; that works on some email browsers, however on others (Outlook) this does not work.
HTML is as follows:-
@media screen and (max-width: 800px) {
.res-block td {display: block !important;}
}<table class="main" width="700" align="center" cellpadding="0" cellspacing="0" border="0" style="background: #fff;margin:auto !important">
<tbody>
<tr class="res-block">
<td style="background: #ff9400;">hello</td>
<td style="background: #ff9400;">john</td>
</tr>
</tbody>Can someone please help?
Thank you!
Are media queries supported by the version of Outlook that you are testing?