Creating a centered, responsive design without media queries

By Nicole Merlin on 25th July 2014

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.

Want to improve your email marketing?

Join over 20,000 other marketers & designers who get tips on improving their email marketing delivered directly to their inbox.

60 Comments

  • Nicholai
    30th July

    I love this…but I’m wondering about font sizing. Is there a way to increase the font size for the Gmail app?

  • Ros Hodgekiss
    30th July

    Hi Nicholai, if I understand correctly, you can change the font size by nesting your text in either something like < td 12px;” > or < span 12px;” >. Let us know how you go :)

  • Bram de Haan
    7th August

    link to JSFiddle doesn’t work for me

  • Sergiu
    7th August

    how will this look in yahoo and outlook 2002-2003? i know that they break everything!

  • Ros Hodgekiss
    7th August

    @Bram - Sorry about that, JSFiddle is unfortunately experiencing a DDOS attack at this time, so you might want to follow them on Twitter for updates. Hopefully we’ll have this code available to you soon.

    @Sergiu - Hah, great question! My reasonably-educated guess is that it will work in older Outlooks too, as they use IE for their rendering (and should make use of the conditional comments above). Yahoo isn’t too bad, either - as it supports max-width & min-width, I can’t see why it wouldn’t work out. As always, test test test :D

  • Julio
    9th August

    AMAZING! I’ve been trying to get this work across a lot of clients. Thank you so much for sharing.

  • William Visalli
    26th August

    I tested this solution and it seems to work in most everything but Yahoo renders it like it would appear on mobile, stacking the columns. Granted I’ve only done a quick and dirty test of the above code, but didn’t know if anyone else had seen this and found a fix.

  • Ros Hodgekiss
    26th August

    Hi there William, you’re more than welcome to post your code in our forums, as we have an active community there (including ourselves) that would love to take a look and suggest fixes. Hopefully we’ll see you there!

  • Nicole Merlin
    2nd September

    @Sergiu This method definitely works in Yahoo, Outlook 2000/2002/2003 and it will even be responsive in the Yahoo app on smartphones. The conditional code takes care of every version of Outlook.

    @William: Yahoo has always tested fine with this method, is your browser window perhaps a little small? As soon as your viewing area for the email is narrower than the outer table (600px in this case), everything will start to stack, as it’s intended. If that’s not the problem then definitely jump in the forums and let us know!

  • Teresa
    9th September

    Is there a way to get this to work if the columns are not equal widths? say one is larger than the other column.

  • Ros Hodgekiss
    18th September

    Hi there Teresa, sorry for the late response here. To confirm, the columns can be any width - even or uneven - for this technique to work. Let us know how you go :)

  • Adam
    23rd September

    Great tutorial! Is it possible you could show all of the HTML together? It makes it easier for me to see.

    Also, I am a little confused regarding multiple rows. An example of this would be great!

    Thanks

  • Richard Bland
    24th September

    @Nicole, Hello, I am trying to get my head around this solution in a real world build. Do you have any examples of a full layout, with single columns for example? I am struggling to not have to use media queries for say a single column section which will need to conform to the 300px width we have applied to these two columns. Any ideas? Do I go ahead and just use media queries?

  • Ros Hodgekiss
    24th September

    Hi there Adam and Richard, check out the JSFiddle we linked to above. There’s an instructive example there with a multiple-row layout. Let us know if you still have any questions :)

    Richard, if still stuck, feel free to post your code in our forums, with a few notes on where you’re seeing issues. We’d be happy to walk through it with you and provide hints where we can.

  • Ricky Gipson
    9th October

    This solution works great! Quick question.

    I have two columns - text on the left and image on the right. I need them to stack image on the top and text on the bottom. Has there been a solution that would work based off this method?

    With just using the method above it stacks text on top and image on bottom.

    Thanks for any help you can provide.

  • Ros Hodgekiss
    10th October

    Hi there Ricky, there are two things you can try:

    1. Changing the order of table stacking using dir=rtl (recommended)

    2. Making the image inline and using this technique to have the text flow around it - while the image should display inline in desktop clients, it should slip above/below the copy on mobile

    Let us know how you go and best of luck!

  • Nicole Merlin
    16th October

    @Richard — I also wrote a tutorial over at Tuts+ that you can check out here. It should answer your questions. I wrote it before discovering this trick though, so it doesn’t include a method for centering like this article does. They would be best used together :)

    @Adam — when using multiple rows, you just need to pretend to Outlook (using more conditional code) that you are closing the row and starting a new one. Always make sure you have the same number of columns in each row in your conditional code. Here’s a quick example.

  • Roy van Slooten
    22nd October

    Great tutorial.

    Just one heads up!
    In the first line of code on this page:
    <table class=”container” width=“100%” cellpadding=”0” cellspacing=”0”  600px;”>

    Are two different types of quotes.

    Because of this the two divs would only stack at first.

  • Roy van Slooten
    22nd October

    Seems I can use HTML in the comments.

    I mean this one:
    table class=”container” width=“100%” cellpadding=”0” cellspacing=”0” style=“max-width: 600px;”

    Kind regards

  • Ros Hodgekiss
    23rd October

    Hi there Roy, thanks for pointing out the “smart quotes” here - it looks like those were missed when we pasted the blog post into our CMS. I’ve fixed this up now, so all the code samples should have regular quotes now. Thanks for that!

  • iam grimus
    25th October

    Thanks for the article.

    Based on my Litmus test Gmail (explorer, chrome, firefox) and Yahoo (explorer, chrome, firefox) are all rendering the code as a single column stack.

    I am I doing something wrong or is this the desired behavior for these email clients?

    Cheers,

  • Iam grimus
    5th November

    Has anyone tested this coding approach in Litmus? If so are you seeing similar results to what I posted above?

    Thanks for the help

  • Ros Hodgekiss
    5th November

    Hi there Iam, this isn’t the intended behavior, so I suspect this might have something to do with the preview pane being narrow enough in Litmus to force the “1 column layout” to appear. Have you tried a live test in Gmail / Yahoo, with the same results?

  • Jerry
    16th November

    Iam: for that very reason, we stopped using this trick; it’s just not worth the headaches that we encountered in Gmail as used on the smaller laptop screens. Nowadays, we just make sure that the email sizes down properly in the Gmail app while at the same time, the email is awesome in the native iOS and Android mail apps.

  • Iam grimus
    19th November

    Thanks Ros, I can’t believe that did not occur to me. I will have to do more live testing. I really appreciate you getting back to me here. Responsive design can be such a pain.

    Jerry, thanks for your comment. I can see that as a legitimate option. However, I would argue that the “correct design” will allow for the flexibility of all preview pains and small screen devices. In my opinion your trading a better user experience for less headaches in the development stage.

    Cheers, and thanks for the comments.

  • Chris Lock
    19th November

    This is such a great post, couple it with your blog post here (http://webdesign.tutsplus.com/articles/creating-a-simple-responsive-html-email—webdesign-12978#disqus_thread) and this is so powerful.

    Re: Iam - Please let us know the results of your findings, I’m interested to know as I’m seeing the same thing.

    Aside from this, seems to work perfectly - so now I need to make this work with 3 or 4 columns! Has anyone managed to do this at all? When I tried a similar approach with 3 columns, Gmail decides to only drop the third column onto the second row.

  • Nicole Merlin
    20th November

    @Jerry — totally understand your comments regarding the fact that you end up seeing the stacked version of the email when you’re in any client on a small screen. It’s a tough one, because that is 100% how this method is designed to work, and in my opinion it’s a better if someone on a really small laptop screen sees the responsive version of an email, designed for the amount of space they have available, rather than them having to scroll sideways. But I understand that we are so used to seeing the “desktop version” in webmail and that it can be confusing to start seeing responsive behaviour in Gmail or Yahoo. But if you design for this scenario, I think it’s a million times better.

    @Ian Grimus — I think this is what you are saying too, and I agree with you.

    @Chris Lock — Thanks so much for your kind words! You are spot on to use both tutorials together :) I hope to write a unified version soon.

    You can definitely use this approach with any number of columns, but unfortunately you can’t control the fact that sometimes the width of the viewport means that just one of the columns bumps down to the next row. The only real way to get around this is to always use two columns, or to fake 4 columns by putting two columns into one (example here).

  • Jerry
    21st November

    Iam: I agree 100% that we are probably trading usability for less headaches, but unfortunately, with how things work on my team, that’s just the way things have to be. The main issue is that we don’t always have control over the design that we are coding and any advice given to the client tends to fall on deaf ears. It’s better when we are doing the designing and coding of the email, though.

  • Nicole Merlin
    21st November

    Sorry — I noticed that I had written the wrong names next to some of my replies, and I have edited my previous comment so that it is now correct :)

  • Jerry
    22nd November

    Nicole: There is no side scrolling in Gmail desktop and/or the Gmail app with our messages as they shrink down to fit small real estate availability. For the most part, this really isn’t an issue, but if a customer insists on having a four column layout (say, four products on a row), it could be an issue with those that require reading glasses using a small smartphone. For our customers, though, that’s better than having three products on the row and one bumping down to a new row. That tends to get really ugly if the customer’s message has four rows of products in it.

  • stephen barrett
    9th December

    This works for me somewhat… But when it test this in a mobile emulator the tables do not collapse?

  • Ros Hodgekiss
    9th December

    Hi there stephen, this is really curious! We’d love to see what you’re experiencing here, so by all means, kindly contact our team with emulator/email client details if you’d like us to take a look.

  • Sumeet Kakani
    12th January

    Hi there,

    I have implemented the code mentioned above and tested it across different clients. So far it’s working in all clients except for windows phone. In windows phone 8, I want to maintain the two column layout and not single column layout, because windows phone does not zoom the content. Can I do that?

  • Ros Hodgekiss
    13th January

    Hi Sumeet, although it may not be in the spirit of this article, you may want to create a media query specifically for Windows Phone 8. The following two articles will help you do this for different handsets:
    - Responsive Design in IE10 on Windows Phone 8
    - Windows Phone 8 has FULL CSS3/Media Query Support

    Let us know how you go :)

  • Paul van Steenoven
    14th January

    I managed to remove the font-size: 0 (spam sensitive) by joining the conditional comment to the DIV tags. Also using the lang tag and deviceWidth fixed width in styles, its now fluid on gmail. :)

    http://codepen.io/paul1973/pen/LEWWoM

  • Sumeet Kakani
    27th January

    Hi Nicole,

    I have used you solution and it works perfectly. But I have one problem. In my HTML, I have alternate image and text in the tables (e.g. In the two sub tables, I have text in first tabel and image in second table and for next it will be image in first table and text in second table). So in the mobile view, it looks like text-image-image-text. But I want it to display like image-text-image-text. Can you help please?
    Thanks!

  • Ros Hodgekiss
    28th January

    Hi there Sumeet, have you tried using the dir attribute (eg. dir=“rtl”) to change the order of your content? We’ve outlined this technique here - let us know how you go :)

  • Sumeet Kakani
    29th January

    I tried the same thing yesterday and it worked for me…thanks for your quick response, really appreciate :)

  • Raskoln
    30th January

    Hi Ros

    First of all thanks for this trick, it helped me greatly. However there is one thing I’d like to add to save some headache for others.

    In cases where your columns only contain image content things can get strange. If those images set to responsive behavior this inline-block div might act like it’s empty. Some clients(android, some apple ones) take this as an empty div also therefore hides them.

    In this situation setting a min-width to the images helped me. I almost killed myself before I found this. It’s probably common knowledge but wanted to share in case someone runs into this issue.

  • Ros Hodgekiss
    3rd February

    Thank you so much for sharing this, Raskoln - I’m sure your hard work will certainly help others! Hope things are looking more positive with your email design now :)

  • Vic Dinovici
    27th February

    Hi Ros,
    the borders are showing only in Outlook 2011 and 2015, no borders in other Outlook versions and some other email clients as well. Also in Gmai (IE, Firefox, Chrome), the 2 tables are stacked on desktop and no borders are showing. In Yahoo you can see something like a 3rd column on the right.

  • Ros Hodgekiss
    27th February

    Very interesting, Vic - any chance you can share your findings on the forums? We’d love to take a look!

  • MarkL
    21st March

    Ros, how would you modify your code (JSFiddle) to do a 3-column layout?

  • Ros Hodgekiss
    21st March

    Hi Mark, I’ll look to getting this JSFiddle/post updated to answer this question; in the time being, I really recommend you take a look at the code used for this 3-column layout created using our email template builder. I think you’ll find the answers you’re after there :)

  • MarkL
    22nd March

    Ros, that layout is not fluid in Gmail app. Moreover, it’s not responsive in Android’s built-in client (4.x) and alignment of the last block in iOS built-in client (8.x) is off. Unfortunately it’s a poor example :)

    If you could update your example with a 3-column layout, that would be sweet, especially since it’s fluid in Gmail app (columns collapse).

  • Özgün
    10th April

    I personally avoid placing the tables as siblings. For me it’s always better to stick with table cells :) I’ll try this method on my next project.

    Thanks!

  • DMA
    20th April

    Has anyone resolved the 3 column issue please?

    In particular 2 equal width with one ‘spacer’ in the middle..?

    Fingers crossed…!!

  • Brett
    23rd April

    This doesn’t work for Outlook 2007, 2010 and 2013. I’ve tried everything to get it to work and the columns stack.

  • Ros Hodgekiss
    24th April

    Hi DMA and Brett, would it be possible for you to post your code in our forums? We’d love to take a look at why this isn’t working as desired. Thank you so much!

  • Leon St Claire Antoine
    1st May

    Following on from Brett’s post (23rd April) I did look for a post to the forum on this but I was unsuccessful. Please could someone point me in the right direction?

  • Ros Hodgekiss
    6th May

    Hi there Leon, I’m sorry you couldn’t find the answers you were after. If you aren’t comfortable posting to the forums, we’re happy for you to send your campaign to our team. While we can’t always solve email coding issues, one of us may be able to point you in the right direction. Best of luck!

  • Sumeet Kakani
    11th May

    Hi Ros,

    I am using this trick and it works well in all clients except Gmail for Windows Mobile. In that client, the two column layout splits into single column, but Windows mobile does not zoom the email content and renders it as a desktop view. Due to this, the single column layout looks too small as as it does not fit-in with device size. Any solution to this issue?

    Thanks in advance! :)

  • Ros Hodgekiss
    12th May

    Hi Sumeet, that’s very interesting! You might want to take a look at the meta tag fix in our forums - a few people have noted that it has really helped achieve more consistent rendering on Windows Phone.

  • Leon St Claire Antoine
    30th June

    I have found that the code does not render correctly in Outlook 2011 for Mac?

    I have read that Outlook 2011 for Mac uses:

    @media screen and (-webkit-min-device-pixel-ratio:0) {
    }

    to render HTML and I have included this in the head tag but it is still not working? Any solution to this issue?

    Thanks in advance! :)

  • Leon St Claire Antoine
    30th June

    Found a solution:

    https://litmus.com/community/code/302-outlook-2011-apple-mail-6-email-stretching-full-width

    I hope this also helps someone else who may have a similar problem

  • Leon St Claire Antoine
    13th July

    On 20th April DMA asked whether the code could be adapted to include
    3 columns. Has anyone been able to come up with anything?

  • Ros Hodgekiss
    16th July

    Hi Leon, you may want to check in on our forums - you might find some great advice there! Alternately, our email builder offers very versatile 3-column layouts, so you should certainly give that a try. Best of luck!

  • Sarah Shuda
    22nd July

    Has anyone been able to add a background color behind the table with the multiple columns? I’m struggling to make that work. I’m working on a 4 column product focused email (quite the challenge).

  • Sarah Shuda
    23rd July

    I’m also wondering if anyone has gotten a 4 column, 4 row layout to work with images? Would love to see an example that works in all versions of Outlook. I cannot get more than two rows to display correctly in all versions of Outlook.

  • opticien skikda algerie
    23rd August

    The template I made doesn’t have any code in it about the navbar. I’d like to bring it back. What code do I put in to show the Navbar in blogger?.

Got something to add?

Sign up for free.
Then send campaigns for as little as $9/month

Create an account