You must use pixel values in the width CSS property or the width attribute to support these email clients. The problem is that Outlooks and Lotus notes do not apply max-width. The following example contains five containers with different widths: 1440px, 1280px, 1024px, 800px and 600px.Īs you can see in the Litmus tests, it's generally a good solution. (Just think about Outlooks.) The pattern for the centered container looks like this: I like to use table-based containers because they are very robust. The straightforward approach to achieve the solution above is to use width: 100% and max-width: 960px (or any other number) in your containers. It means that your content is generally fluid with an upper boundary (for example 960px), and your multi-columns are stacked under 600 pixels. The break-point for this can still be 600 pixels. If you have multi-columns in your email, then they should be stacked on mobile devices.
When the device's width is less than the container's width, then the width of our container should be fluid (width: 100% ).
Css force responsive resize how to#
So, how to define that generic solution? Well, the width of our content containers should not only be 600px, but much, much larger than that as well. What if I start a new newsletter? What if I need to use my templates somewhere else? This approach is just way too much work. To be honest, I'm not satisfied with the "looking at our email list then decide" approach. They realized that most of the people on their email lists open their emails on such email clients where it's not an issue any more. There are many companies who are experimenting with wider newsletters. Many people in the email community are doubting that we still need to use such narrow designs. The latter is an in-depth article, I really recommend you to read that. The first was published on this blog long, long ago the second was published recently on chamaileon.io's blog. But why is that? We have written two articles about it already. The de facto standard for HTML emails' width is 600 pixels.