Browse by...
Home Resources Blog

Got two or more columns of content in your responsive email design, but find them stacking in the wrong order when viewed on mobile devices? This simple coding technique will put them in their place.

When coding emails, there are likely times when you wish you had a little more control. For example, when creating layouts with the intent of stacking multiple columns (or technically, table cells) for easy reading on mobile displays, the natural order when using % column widths is left on top of right. But, how about if you wanted an image in a right-hand side column to stack on top of some text in a left-hand column? The answer is something quite unlikely – the dir attribute.

Quite simply, dir allows you to change the ordering of any HTML elements, although its original purpose is to adjust content for right-to-left text (as you likely know, the browser default in places that use Romanized text is left-to-right). It’s also supported in every email client that we know of.

Here’s the natural order when using % column widths:

Default order of stacked columns

By applying dir=”rtl” to a table (thus changing the order in which nested cells stack) and dir=”ltr” to the cells within (to ensure the text reads left-to-right instead of, well, backwards), you can reverse the browser/email client defaults and reliably stack content when it’s viewed on small viewports. Here’s the simplified code:


/* Media query for mobile*/
@media only screen and (max-width: 480px) {
.full {
display:block;
width:100%;
}
}

...

/* HTML */

<table dir="rtl" width="100%">
<tr>
<td width="50%" dir="ltr" class="full">

<p>Right-hand side content: Stacks on top on mobile</p>

</td>
<td width="50%" dir="ltr" class="full">

<p>Left-hand side content: Stacks underneath on mobile</p>

</td>
</tr>
</table>

dir=rtlApplying dir=rtl when using % column widths

To help you see the difference, compare:

And that’s a wrap. Huge thanks go to Brett DeWoody for documenting this technique and providing a solid starting point for our own example. If you’d like to read more about creating responsive layouts that fare well in (almost) every email client, I recommend checking out Creating a centered, responsive design without media queries. With an understanding of these techniques, you can take control of your content flow on any device.

This blog provides general information and discussion about email marketing and related subjects. The content provided in this blog ("Content”), should not be construed as and is not intended to constitute financial, legal or tax advice. You should seek the advice of professionals prior to acting upon any information contained in the Content. All Content is provided strictly “as is” and we make no warranty or representation of any kind regarding the Content.
Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.

Subscribe

Get started with Campaign Monitor today.

With our powerful yet easy-to-use tools, it's never been easier to make an impact with email marketing.

Try it for free