/ Gap

Watch out when using reverse stack in long copy email design

Note: When I move my blog to another server, I lost some images and links are not working. So I removed them. But the basic idea will remain the same. Feel free to reach out if you have any question.

I ran into a render issue of reverse stacking two long copy. And then finished with using media query CSS instead of "table align".

This post is used to give you a quick glance at what render issue I've met and how I deal with it.

So first, I took some time just now to google out two useful & awesome solution on dealing with the reverse stack. You should always take a quick view on these posts before you start working on your reverse stack email.



So what I originally used is "table align" by wrapping two long copy with two tables. Put the right column at first with align="right", and put the left column next to it with align="left". Then put them under a table with fixed width.

But it ends with an unexpected gap in the famous word render engine.

This is a notorious issue of word engine which I've introduced in previous post. There are lost of way to deal with it. But after I wrapped each table with a td. The gap has gone. So I assume that side by side tables in one td will create gap issues. But this works well when there is no such long copy in it.

So then I switched with wrapping two sibling tds outside two tables. Then set display: table-header-group to the right td and display: table-footer-group to the left td.

And then it looks fine. But you should always do a render test after you do so. Because I found that there is a known issue with using table-xxxxxx-group. You will lose the width of the element that you attached with table-xxxxxx-group, cause it's acting like an inline element. So the width depends on how wide the content is.

Woody Chai

Woody Chai

I love HTML, CSS and JAVASCRIPT. I'm an developer working on SFMC (AMPScript, SSJS, SOAP/REST API). Love to work on all kinds of issues and dig out new technologies.

Read More