Using a preprocessor and a mixin to generate all the required properties could be more than helpful. The final version of the calculation (to support the old and degrade gracefully on the new one) is hard to read.While this rarely happens, you couldn’t go from a four columns layout on mobile to a single column layout on desktop. You can only diminish the number of columns from a desktop version to a mobile version.This might not be such a problem for emails though, as designs rarely go beyond 600px on desktop and don’t require more than one breakpoint to adapt on mobile. So we could improve things a bit by making a mobile first version of our email, and then enhancing it on desktop with media queries. The desktop version of its webmail supports media queries, though. Here are a few limitations that I can think of: Like anything in the email development world, the Fab Four technique isn’t perfect. If the min-width value is greater than the width or max-width values, min-width wins.Ĭan guess what the width of a box with the following styles would be ?.If the width value is greater than the max-width value, max-width wins.In order to fully understand how it works, here’s a reminder of how width, min-width and max-width behave when used together (as clearly summarized by fellow french front-end developer Raphaël Goetter). On top of the calc() function, the solution I found involves these three CSS properties. A solution Remembering width, min-width and max-width Flexbox is a great contender, but unfortunately Flexbox support in an email is abysmal. I’ve been looking for ways to solve this problem for a long time.
Without media queries, columns can stack up but not grow full width. Once all the blocks are stacked, they don’t take the full width of the email. Once a screen can no longer contain two blocks side by side, they will naturally flow below each other. The big idea is to have columns as s with a fixed width aligned with “display:inline-block”. That last approach has been my favorite so far. An hybrid approach, a Gmail first strategy, or a responsive email without media queries are great ways to adapt to this situation. Making responsive emails is hard, especially since email clients on mobile (like Gmail, Yahoo or ) don’t support media queries. calc() & width & min-width & max-width, aka The Fab Four (in CSS). Or as I like to call them all together: the Fab Four (in CSS). The solution involves the CSS calc() function and the three width, min-width and max-width properties. I think I found a new way to create responsive emails, without media queries. By Rémi Parmentier The Fab Four technique to create Responsive Emails without Media Queries