Mjml: Issue with Gmail when columns have a 'width' attribute

[raulsann]

We are having an issue in Gmail. When we create mj-columns with a 'width' attribute, Gmail hardcodes the value of 'width' to 100%.

This only happens when Gmail has the setting "Ask before displaying external images" turned on.

See here:

The issue appears in the email right when the receiver clicks the "display images below" link. See here:

And this is the result:

If the "Ask before displaying external images" setting is turned off, we don't run into this issue.

This is a Gist with the email we are sending
https://gist.github.com/raulsann/ae3f7406d4e0ad56df5b6920f8038ed7

Does anyone have an idea of how to solve this issue?

Thanks!

MJML version:

4.0.0

Email clients the bug is seen on:

Gmail in Chrome.

[ngarnier]

Unfortunately this bug is 100% on Gmail side, so I'm not sure what we can do about it?

The good news is that it seems to be solved in the new Gmail.

See https://github.com/hteumeuleu/email-bugs/issues/24

[raulsann]

Got it! Okay let's hope the Gmail is rolled out soon.

Quick note that this doesn't happen if we use https://foundation.zurb.com/ and we are thinking about switching to it.

[ngarnier]

I guess it depends more on the layout of the email, as the issue is general (even when you don't use any framework), than the framework used.

Totally up to you and we can understand pros and cons, but I'd like to suggest checking the state of both frameworks, the velocity of development & updates, the reactivity on opened issues as well as the liveliness of both communities before making your choice :-).

[iRyusa]

This (mean zurb behavior in gmail when display image) is because we're doing a mobile first approach, and you're defining the width in px instead of % fallback should be better if you're using a percentage based width.

I'm closing this issue because the behavior come from gmail and not from MJML code.

[ngarnier]

I'm adding this to @iRyusa's comment about the mobile-first approach: we made the choice of mobile-first (and believe it's the best one) while foundation is desktop-first because it's the one that offers the best support across email clients.

• media queries support is better on desktop than mobile, so a mobile-first approach offers a better support for responsiveness across email clients
• in the case where responsiveness is not supported, the mobile-first approach will display a mobile layout on a desktop client (not the most elegant, but 100% readable), while a desktop-first approach will show a desktop layout on a mobile client (which often makes it unreadable, with the need to zoom in and/or scroll horizontally)
• it's future proof, as the tendency goes towards more and more emails being read on mobile devices

Now you know all the details!

[raulsann]

Thank you for this clarification!
Really hope Gmail rolls out their new version soon so that we can all keep enjoying of MJML.