A good first step might be to check out Brian Graves' Responsive Email Patterns—particularly the layout and grid blocks sections. One of those, or a combination of techniques, could help you achieve whatever you're looking to do.
Yeah, that looks right. It's pretty much what I built and tested with.
You may have to use some Outlook conditionals to shore up stability in 2007-2013, but it shouldn't require much in the way of extra CSS. A nice side-effect of all of those aligned tables is that it'll work in the Gmail app as well. And Gmail web, if you set the email up for mobile-first.
I had tried the solution of 6 aligned tables within one row to go from 2 rows of 3 columns, to 3 rows of 2 columns on mobile. However, I have found in a quick test that Outlook 2000-2003 doesn't like this and put them all side by side (and actually one table disappears completely).
Has anyone run into this issue and know of a fix? Or is there another method for this? I can't think of anything, as obviously TDs will not work, and they all need to be in the same TR because the last col of the first row and the first col of the second row need to be side by side on mobile.
ETA: Well, I spoke too soon... simply use a <div> with clear:both; between the two "rows" of tables (after the first 3 aligned tables) and that will get Outlook 2000-2003 to play nicely! And then hide or use clear:inherit; for that div using a class in the media query for mobile.
Not necessarily an issue but more of question of possibility. Once the third column breaks to new row is it even doable to have the following column fill the space in the row?
Just a quick back-of-the-napkin thought here: have you tried aligning every column table to the left? You should then be able to control how many are on each row simply by manipulating the width of the container that holds those tables.
I just coded up a quick testbed, and it bears that theory out. The immediate issue I see is that a setup like this will be very brittle, but it should be controllable with some carefully-written CSS.
However, it requires you to duplicate the code. Not sure if that's something you care about. It's a real simple example and you'd probably have to use a bit more css trickery depending on the contents of cells.
EJ
A good first step might be to check out Brian Graves' Responsive Email Patterns—particularly the layout and grid blocks sections. One of those, or a combination of techniques, could help you achieve whatever you're looking to do.
Cheers!
Not sure if this is exactly what you're after, but I did this a while ago and Litmus kindly put it in their blog:
https://litmus.com/blog/taking-mobile-optimization-to-the-next-level-hover-effects-layout-changes
Look at the 1 2 3 section about half way down the blog.
I hate looking at my old code, it's like looking at old picture of yourself. I'd do it slightly differently now but still the same concept.
Hope it helps.
Fabio - I was kind of going that direction from the start and I'll post where I'm at below.
Jeremy - I think that could be a good solve but I'm always a bit weary hiding/showing content in email clients. I like what you did though.
I'll 'love you long time' if you see any faults and could improve on this code. http://cdpn.io/mlkAf
Mark - thanks, but not what I was going for.
You guys are rock stars!!
Yeah, that looks right. It's pretty much what I built and tested with.
You may have to use some Outlook conditionals to shore up stability in 2007-2013, but it shouldn't require much in the way of extra CSS. A nice side-effect of all of those aligned tables is that it'll work in the Gmail app as well. And Gmail web, if you set the email up for mobile-first.
I had tried the solution of 6 aligned tables within one row to go from 2 rows of 3 columns, to 3 rows of 2 columns on mobile. However, I have found in a quick test that Outlook 2000-2003 doesn't like this and put them all side by side (and actually one table disappears completely).
Has anyone run into this issue and know of a fix? Or is there another method for this? I can't think of anything, as obviously TDs will not work, and they all need to be in the same TR because the last col of the first row and the first col of the second row need to be side by side on mobile.
ETA: Well, I spoke too soon... simply use a <div> with clear:both; between the two "rows" of tables (after the first 3 aligned tables) and that will get Outlook 2000-2003 to play nicely! And then hide or use clear:inherit; for that div using a class in the media query for mobile.
Thanks Jason, been there done that. Perhaps I'm not looking at it correctly?
Do you have some code and screenshots you could post? Maybe a little more context on the issues you are running into?
650px width
Not necessarily an issue but more of question of possibility. Once the third column breaks to new row is it even doable to have the following column fill the space in the row?
Just a quick back-of-the-napkin thought here: have you tried aligning every column table to the left? You should then be able to control how many are on each row simply by manipulating the width of the container that holds those tables.
I just coded up a quick testbed, and it bears that theory out. The immediate issue I see is that a setup like this will be very brittle, but it should be controllable with some carefully-written CSS.
Here's one way you could do it: http://codepen.io/jeremypeter/pen/foGnm/?editors=110
However, it requires you to duplicate the code. Not sure if that's something you care about. It's a real simple example and you'd probably have to use a bit more css trickery depending on the contents of cells.