Samsung Email’s auto-fit is breaking your emails (and how to fix it) 

Depending on which source you look at, Samsung is either the number one or number two smartphone brand in the world. Either way, its market share is significant.

Most (but not all) Samsung phones come preloaded with Samsung Email, with the Google Play Store listing over 1 billion downloads. So, it’s very important to consider whether your emails are playing well with Samsung.

Samsung Email has a great-sounding feature that will “auto-fit content” when an email isn’t optimised for smaller screens. However, much like the issues you may have seen with forced dark mode, it can help some emails but hinder others.

The process works by searching for width attributes that exceed the screen's size. If any are found, it will then adjust the viewport to match the most significant attribute, leading to a zoomed-out view of the email. Now that it’s zoomed out, some of the text will be hard to read, so Samsung also increases some of the font sizes. All this results in an email that looks quite different from the one that was sent.

Because this feature only uses the width attributes and ignores any inline styles or @media queries, which makes it very difficult to work around.

If width attributes cause the issue, do we really need them? Can we use CSS instead?

MSO versions of Outlook on Windows (those that use the same rendering as Microsoft Word) don’t support CSS widths; they only support attributes, so yes, we do need them to some extent.

For images, if the width attribute is not set, Outlook will render the image at its original size. So, this may not be an issue if you are using exact image sizes; however, many people prefer to use retina images (twice the size) to get a crisper image on modern devices.

For most other content in Outlook to get a width to apply, it should be added inside a \\<table\\> with a width set. Most emails contain all their content in a single table, set at a width of around 500px to 700px. This is used to keep lines of text within 80 characters to meet the WCAG 1.4.8 AAA accessibility standard.

If you’re coding using ghost tables (like we do with Design Studio standard components), then this isn’t a concern, as Samsung won’t register these width attributes.

Microsoft email accounts (hotmail.com, live.com, outlook.com, etc.) are rendered differently in Samsung Email and don’t appear to have the same issues. There is still a difference between “auto fit” being on and off, but it’s not as bad.

The solution is relatively simple — we set the width attribute twice.

When rendered by most email clients, the first value will be ignored, and the second one will be applied. This is the case for MSO versions of Outlook.

When Samsung Email renders the email, it removes the duplicate attribute, leaving only the first width with no value, so it doesn’t need to apply auto-fit.

Some other email clients, like Gmail, Outlook Web, GMX, and Libero, will also remove the duplicate attribute. Therefore, we need to ensure that we aren’t solely relying on this and include a CSS value as well.

Since the Samsung issue arises from detecting widths that are too large for mobile devices, we don’t need to apply this to every width attribute we set. It’s only needed when the attribute value is over 380. This value is dependent on the device's size and resolution settings, but I’ve found that 380 should cover most modern Samsung phones.

Technically, a duplicate attribute isn't valid code; HTML is designed to be resilient, so it won't throw an error, but will instead ignore the first attribute. As this isn’t valid code, you may see it flagged in some validation tools, including our own problems tab within Design Studio—just something to be aware of.

Additionally, some sending platforms may have restrictions that block you from sending this code. At Customer.io, we understand that email code can sometimes get a little dirty, so we don’t block things like that.

A couple of years back, when this issue first started appearing, the folks at Mosaico found another solution. Adding this code will stop the email from displaying as zoomed out.

The auto fit is still applied, but this will minimise the impact it has. This is a great solution; however, I found that it can also affect the email when auto-fit is turned off. I expand on this by adding the following code, where .x-wrapper is the class applied to the outermost element in the code.

For me, the duplicate width attribute works better, as it prevents the auto-fit changes from being triggered, rather than fixing the issues that it causes. However, it won’t work for everyone, so having multiple solutions is always beneficial.

This fix was recently added to Design Studio. If you are building your emails using our standard components, you shouldn’t have any issues; however, if you built them a while ago, you may need to republish.