4 Column 4 Row Responsive Email
I wanted to share my template with the community for anyone else trying to code a multi-column, multi-row responsive email for presenting products (or anything else).
When viewed on a mobile device I wanted the products to appear side-by-side in two columns, instead of 100% width as we generally include many products in each email making the email quite long if stacked in a single column.
I originally was following this guide from Campaign Monitor but came across some issues when doing multiple rows. I found that you need to create a new conditional table wrap for every row, otherwise in certain versions of Outlook some of the rows start splitting into two columns too early (among other issues).
Here is the code for you to check out if you're looking to do something similar: code
Another challenge was supporting background colors behind the products. You'll see the span div and inline styles used as well.
Make sure to use an inliner tool (such as MailChimp's) before you send as well to avoid a few other hiccups.
When I tested this code in Litmus, it showed an issue with Apple Mail 8, but I tested it directly in Apple Mail and it displayed great. That was the only issue that came through after many hours of futzing :) It even works in Gmail's App.