I think we've all been there - designed something, only to realise what we've designed isn't actually implementable. I did just that this morning, and while it was a time sensitive piece and I redesigned it in order to get it done in time and coded up, I still want to be able to figure this out.

This is a section of the email I designed:

Side by side tables

The dark blue top stretches 100% width of the email, as does the lighter blue. Content is centre aligned in the container table, and the content is set in a max-width of 630px. Once a breakpoint of 480px is met, both tables go to 100% width of the container table, and stack one on top of the other.

I don't know if it was my brain unable to simplify this, but I simply couldn't figure this out - to be able to have the background colours as they are designed, and then stacked in anything smaller than 480px. Stacking the content requires the left and right tables to be their own tables, however, I couldn't keep the design doing this.

Well, one solution was to duplicate the content and show one type for anything above 480px and another "mobile version" for anything smaller. But I don't like the idea of duplicating that much content.

Am I overthinking this? How would you code this up?