I like to keep things simple and inline at the TD level along with any MSO conditionals.
Only interactivity I'm using in my emails is the hover effect of CTA buttons. I too would like to hear more experiences from others.
I just noticed Outlook (Android 6.0) - not sure if this is Outlook.com on Android 6.0 - is also no longer responsive. Not sure how it renders on iOS. Hope Microsoft fixes this ASAP.
I have a feeling the CTA button overlaying it is causing this issue. Can you send a screen shot of what you're seeing in OL 2013?
If you don't apply "mobileHide" to both IMG and TD tags, the TD will still show up having a width of 30px.
I also noticed you have fixed widths in the bullet table and TD:
<table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" class="wrapper2" width="600">
and
<td class="mobileColor" width="610" ...>
I would remove the width from the TD element and change 600 to 100%.
Then, for wrapper2, I would change it to this:
.wrapper2{ width:100%; padding: 0 !important; }
I would create a new class (say, hideCheck) just for the checkmarks and apply it to the <TD> holding the IMG as well as the IMG itself.
In your <style> >
@media:
.hideCheck {
display:none !important;
}
HTML:
<tr>
<td width="30" class="hideCheck"><img src="http://namwpm.eccmp.com/wpm/540/TestLou/tick20.jpg" width="20" height="20" alt="" class="hideCheck" /></td>
<td class="mobileColor" width="610" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color: #666666;"><strong>Head towards the Silver Zone bus stop.</strong></td>
</tr>
Let me know if this works.
Curious to know if you're using Builder to "test" your email vs. sending a test directly from your ESP? My experience is, for the most part, Builder seems to render HTML like a browser. I believe you can get a more accurate result if sending the test directly from your email platform.