Home Resources Blog

This was a technique discovered while we were working on Canvas. While it didn’t make it into the final product, we think it’s worth sharing anyway.

Getting responsive emails to look nice in the Gmail app is a never-ending challenge because of its infamous lack of support for media queries. I’ve previously blogged and written about ways to get a fluid email to look great in the app, but it comes at a design cost; you have to keep one column fairly narrow so that the other column will be wider than a mobile viewport and thus, when viewed on a mobile screen, take up 100% of the screen.

But what everyone wants to do, of course, is have equal-width columns that stack. Often this is achieved by using the align attribute to ‘float’ one table to the left and one to the right, but when viewed in the Gmail app (especially on larger mobiles), these aligned tables retain their positions, with undesirable results:

The solution that we discovered is to use display:inline-block in combination with text-align:center to get your elements to behave as if they are floating but centered. This just takes a little bit of fiddling to your overall template to get this to work.

Start with the fluid method

You need to create a table that is 100% wide with a max-width of your desired size on desktop.

<table class="container" width="100%" cellpadding="0" cellspacing="0" style="max-width: 600px;">
	<tr>
		<td>
		</td>
	</tr>
</table>

Then, to appease Apple Mail, which doesn’t respect max-width, create a media query to limit that table’s size on desktop:

@media screen and (min-width: 601px) {
	.container {
		width: 600px!important;
	}
}

And wrap the whole table in some conditional code to appease Outlook, Lotus Notes and clients that render with IE:

<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
	<tr>
		<td>
<![endif]-->

(your table here)

<!--[if (gte mso 9)|(IE)]>
		</td>
	</tr>
</table>
<![endif]-->

Our secret weapons:
Using text-align:center and display:inline-block

Add the following styles to the TD of the ‘container’ table:

<td style="text-align: center; vertical-align: top; font-size: 0;">

The text-align: center is simply to get the contents of the cell to be centered (our desired effect), and the vertical-align property is your choice of value. The font-size: 0 is to fix a spacing bug where space can sometimes appear between inline-block elements, which we’ll be placing inside.

Now we need to start another table for Outlook/IE inside this cell. We’ll add another conditional table the same as our first:

<!--[if (gte mso 9)|(IE)]>
<table width="100%" align="center" cellpadding="0" cellspacing="0" border="0">
	<tr>
		<td>
<![endif]-->

Now, inside our cell (and our conditional cell), we’re going to place some divs with a display: inline-block property. As inline-block elements, they’ll obey the text-align property on the containing cell (text-align affects all inline or inline-block elements in a container).

<div style="width: 300px; display: inline-block; vertical-align: top;"></div>

The most important things are to set a width (no more than half the width of the container) and to set the display to inline-block. The vertical-align is up to you depending on your layout.

Then inside this div, you can place your content inside a table.

<table width="100%">
	<tr>
		<td style="font-size: 12px;">
			Hello!
		</td>
	</tr>
</table>

You will need to apply a font-size to your table contents because we set it to zero on the container cell.

In between each of these divs, we’re going to pretend to Outlook that we’re closing our conditional table’s cell and opening a new one:

<!--[if (gte mso 9)|(IE)]>
</td><td>
<![endif]-->

Then repeat your div to create another column. In our case we are creating two, so we’ll add one more.

Finally, we’ll close our conditional table

<!--[if (gte mso 9)|(IE)]>
		</td>
	</tr>
</table>
<![endif]-->

Now you have multiple blocks inside a cell that will reflow to fit the viewport. You can add as many inline-block divs as you like, but if you add multiple rows’ worth, you will need to start a new conditional row for our Outlook table by inserting this code:

<!--[if (gte mso 9)|(IE)]></td></tr><tr><td><![endif]-->

Magic!

Here is how to visualize all our conditional jiggery-pokery:

See this in JSFiddle

And now you’ll have centered blocks in the Gmail app, as well as other apps that don’t support media queries, such as Outlook.com app and the Yahoo! mail app. You can then add media queries (for those clients that support them) to make the divs 100% of the width of the viewport.

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

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free