With our two column design propped up by Outlook-only tables, that leaves only Google’s webmail clients: Gmail, Google Apps and Inbox.

Calculations for Google’s webmail trio

These clients don’t give us much to work with. CSS is only supported when coded inline with style attributes. There’s no media query support, and there are no other ways of targeting Google’s webmail clients without also targeting their mobile apps.

Our solution? The calculation feature in CSS.

Instead of setting a CSS property to a fixed number value like 600px, you can set it to a calc() function containing a mathematical expression. In our case, we want the width of our layouts and columns to change depending on the width of the email client.

For our .layout width, we’ll use the following function:

width: calc((Desktop Width - Mobile Width) * 100% - (Desktop Width - Mobile Width) * Breakpoint - Desktop Width);

The layout has a desktop width of 600px and a mobile width of 320px. And we’ll use the same 620px breakpoint as in our media query to switch between the two.

With the numbers filled in, the function looks like this:

width: calc((600px - 320px) * 100% - (600px - 320px) * 620 - 600px);

When the email client executes this function, the 100% is replaced with the email client width.

We can mathematically simplify the function:

width: calc(28000% - 173000px);

When the email client width is exactly 620px, this function returns 600px, which is the desktop width we want. But if the email client width is reduced by just one pixel to 619px, the result is 320px, our mobile width. This allows us to switch successfully between desktop and mobile views on the right screens.

The email client width will rarely be exactly 619px or 620px though. So to limit the range of possible widths to just the two we want, we set 600px as the max-width and 320px as the min-width .

With these inline styles, we can achieve something similar to our media query, without the need for media query support. While calc() isn’t supported everywhere, it does work in all of Google’s email clients, both webmail and mobile.

Because older mobile email client versions don’t support calc() functions, we’ll also keep the pixel based width from before as a fallback.

Here’s how it looks when combined:

.layout {

max-width: 600px;

min-width: 320px;

width: 320px;

width: calc(28000% - 173000px);

}

We’ll do a similar calculation for the columns too, but we’ll base it on the width of .layout since that’s the parent of the .column elements. That means we’ll use the layout’s desktop width of 600px as the breakpoint, so when the layout switches to its desktop width, so will its columns.

The function for the 400px column works the same way as the layout:

width: calc((Desktop Width - Mobile Width) * 100% - (Desktop Width - Mobile Width) * Breakpoint - Desktop Width); width: calc((400px - 320px) * 100% - (400px - 320px) * 600px - 400px); width: calc(8000% - 47600px);

But for the 200px column, which is wider on mobile than on desktop, we need to switch it up slightly:

width: calc(((Mobile Width - Desktop Width) * (Breakpoint - 1px) + Mobile Width) - (Mobile Width - Desktop Width) * 100%); width: calc(((320px - 200px) * (600px - 1px) + 320px) - (320px - 200px) * 100%); width: calc(72200px - 12000%);

We’ll also float the columns to the left, so that they’ll sit beside each other at the desktop width, but stack on mobile when only one column can fit width-wise: