Love it, Steven. Great job adapting the technique for email to remedy a common headache.
I solved a very similar problem (albeit for a narrower use case) with a more primitive hack in my video preview technique, but if this has similar email client support, it’s certainly a much nicer approach. Looking forward to experimenting with it.
The best method I’ve come up with for dealing with Gmail’s mobile apps is to code for mobile first, and then use a combination of techniques to display the desktop version where suitable.
That's interesting, Mark – that worked better than I would've guessed. Outlook rendering is more precise with padding and border though:
Are there any advantages to using outline?
This one's useful for adding Outlook support to various different responsive techniques. A more complete example with great email client support here:
https://www.campaignmonitor.com/blog/post/4240/creating-a-centred-responsive-design-without-media-queries
Technique explained at https://www.campaignmonitor.com/forums/topic/7223/outlook-200710-responsive-design-height-limitation-1728px/#p26564
I like that this doesn't actually involve any hacks, other than Justin's :hover selector for Gmail.
Credits to Josh Hughes at FreeAgent who first tipped me about using borders for padding a couple years ago. And of course Justin Khoo at FreshInbox for the Gmail :hover hack.