tutsplus / creating-a-future-proof-responsive-email-without-media-queries Goto Github PK

Is there a reason you use a wrapping div for the 2-columns while you direclty put the "content" class in the table for the 3-columns?

Also, you have styles declaring ".column" as display: inline-block but you don't put it back to "display: table" or "display: block" on media query:

I'd expect something like this in the @media query:

    .column {
        display: block !important;
    }
    table.column {
        display: table !important;
    }

Otherwise a small content would not push its ".content" to 100%.

Another option would be to use "width" instead of "max-width" in the @media rules, but maybe there is a reason to not use it... any hint?

Thank you for sharing this template!

Hi,

this is absolutely a great piece of code, but I think there is an issue...
It seems, in 2 or three columns blocks, that vertical-align: middle doesn't work if the first column has vertical-align: top

Any suggestion?
Thanks
Ale

We like our emails to start with a title and view in browser link (both in separate tds).
I usually comment out the Johnson block unless client wants, but I would need code for that.
Finally, how do you add a footer with an unsubscribe link?

Is there any license for this code?

This project/example is a great resource, but there are some things that are just a bit confusing to me. I understand for the sake of code weight, just using a table for simple one-column layouts without divs, but this presents issues with consistency across rows of content and I think the extra couple lines of code to do ghost tables here would be much less confusing and more maintainable.
Secondly, if you need to have a section have a different background color, it doesn't work with this weird padding convention where you have to manually set a padding on every row of the layout to line up the edges. Adding a background color to a section with this method would mean a nested ghost table and div inside another just for a bg color, which, while technically works, is not ideal when the rest of the rows don't have this. It would be much better to wrap each row by default with its own wrapper div/ghost table with its own padding so background color can be controlled within the padding of each section.

IE9 correctly supports media queries, so it applies media query styles to a layout using conditional comment tables, and this is not supported by the layout that breaks.
replacing:
[if (gte mso 9)|(IE)]
with:
[if (gte mso 9)|(lte ie 8)]
get better results on IE9.

Do you have any warning against this change?