Ha actually it looks like it's supporting the old [lang="x-foo"] and :checked styles from a couple of years ago.
So feeling more confident it's only a temporary thing.
We're seeing the same thing too. My guess is some code was pushed accidentally and this wasn't intentional.
Hopefully they'll roll back the change or make the full move over to New Gmail quickly.
Are you using a margin on the <ul>?
Bullet points tend to render find on MSO Outlook unless you use a margin, the solution i use is to wrap the <ul> in a <div> and apply a margin there.
<div style="margin:20px;">
<ul>
<li>list item</li>
</ul>
</div>
There is also the options to add list-style:disc inside; mso-special-format:bullet; to each <li>
<ul>
<li style="list-style:disc inside; mso-special-format:bullet;">
list item
</li>
</ul>
I would avoid the temptation to use the <table> and • method. As it adds more code and breaks accessibilityI
The media queries and layout are basically the same, this is about how you decide on the values you put in those media queries.
When talking about breakpoints on specific screen size it means using media queries with 320px, 480px which are common screen sizes.
When talking about breakpoints based on design it means looking at your email and reducing the screen size, maybe it starts looking bad at 567px so you add a breakpoint there and another when it looks bad at 456px.
The first approach makes sure you email looks good on the most popular screen sizes, the second makes sure you email looks good on any size screen.
I love the idea but when I clicked on that, it was still for ages then flickering before finally playing smoothly after 20-30seconds. If that's happening on my pretty good laptop and internet, I'd say the quality isn't quite there for this technique.
There are a few other options, you could try animated webp, or animated png images then fallback to animated gif. It's hard to detect support and best done server side, if you use a CND then this might already be built in.
You can put an mp4 in an <img> tag, i've not played around with this yet so not sure of the support and issues around it.
Also you could try a CSS frame animation, Kristian Robinson did a good write up on this https://medium.com/@ka.robinson82/video-in-email-591e78f42781 but be thoughtful of the fallback, you don't want a large fallback gif loading in the background as well as the animation.
That brings up an interesting point that it may very much depend on your market, weather people are more likely to use a work email or a personal one.
Anecdotally, I've only had my work address since 2014, but I think I set my personal one up around 2000
Yeah tables are sized as box-sizing: border-box; by default but you can change that.
In your media query you have this line of code
.testinline2 {padding:10px !important; vertical-align:top; padding-top:10px; display:block !important; width:100% !important; margin: 0 auto !important;}
That is setting display:block making it a block element then adding width:100% & padding:10px;.
You have your width set to width:100% plus you have padding: 10px . On a table element that is ok but on a block element the width is worked out differently so the total width of those elements is 100%+20px.
One solution is to add box-sizing: border-box; to the styles on .testinline2 (although this may not work in all clients)
Another solution is to remove the padding from the <td> and instead use a margin on your <h2> and <p> elements.
Hope that helps :)