Thanks Dante-
I'll spin this up in Marketo and send it to Litmus to have a closer look, let me circle back on that piece.
In the short term, here's some "potential" feedback I noticed from a quick scan:
Here's a table I grabbed from the HTML:
<table class="table3-3" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" align="left" border="0" cellpadding="0" cellspacing="0" width="220">
I might be superstitious but I've had success with defining an "order" to the HTML where attributes precede the style="" tag - as a 'rule of thumb' I try to add the class="" after the other attributes and before the style attributes b/c it pretty much reads styles into the document at that point, so that will establish some sort of "logical order" -- standardizing this order on all elements has shored up inconsistent display issues before, but more over is a peace of mind thing for testing/dev/troubleshooting. This part is more "polish" than "substance" - so not "required" but "recommended" maybe. That said - for starters it might look like this: (recommend add'l code in bold / not sure you need the other stuff yet😞
<table width="220" cellpadding="0" cellspacing="0" border="0" align="left" class="table3-3" style="border-collapse:collapse; width:220px;">
Next, the width="220" is likely "sticking" with your gMail display and compliments a few more tables that have fixed widths to create a row in the layout. Since those widths are fixed, Gmail will try and take the 640px display and "shrink" it down like a smaller version of the desktop version. This is b/c the elements on the screen exceed the normal screen size. Keep things in-and-around 320px max-width for mobile and you'll probably have more success with that. That said, I'd offer up this as a solution (but again, I'll loop back after a dive on this with more info):
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="left" class="OneThird" style="border-collapse:collapse; width:100%;">
in your <style> in the <head>, you'll want to add:
/* makes it full width up to 640px */
@media screen and (max-width: 640px) {
.OneThird {
width:100%;
}
}
/* makes it ____px under 640px */
@media screen and (min-width:640px) {
.OneThird {
width: 220px;
max-width:220px;
}
}
I've found that since gMail started taking media queries, it can be good to be explicit with them and have rules for above/below 640px to "double-down" on gMail's ability to read a style and render it as expected. Sometimes tinkering with these settings (moving things from the <style> element into a media query) has helped, but not sure I completely understand why - yet.
May need to tinker this (it's a "general solution") to fit your framework a little, but I'll get back on that and see if we can surface a few ways forward to iron this out.
Thanks for sharing your code, stay tuned!
-Dave
.png)