css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

A small email template I've put together based on HTML Email Boilerplate and other resources. The two columns turn into a single column for email clients that recognize media queries. For others they'll use the percentage widths or will show the regular 600px wide format. This framework has tested successfully in Gmail, Yahoo, Mac and PC Outlook, and works responsively in the native Android, iOS and Gmail apps. The only issue I've found is the right-column images appear at their full-width in PC Outlook.

This Pen's CSS needs to go in the HTML head and make sure to also get the meta tag from the settings. The head CSS is meant for clients that recognize it; the email WILL STILL WORK in those that don't. The media query is set for max-width: 430px to display correctly in CodePen, but that width can be whatever works best with your content.


  1. Browsers OK Android 4/10 Outlook 8/10 - blue background Ios 8/10 Total: 6/10


Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.