search

mjmlio / mjml

MJML: the only framework that makes responsive-email easy
https://mjml.io
MIT License
16.86k stars 948 forks source link

Responsive mjml-column not working in some gmail versions #1280

Closed engray closed 6 years ago

engray commented 6 years ago

I'm using mjml for creating 2-3 column, responsive layouts. Sadly it does not work consistently in web gmail. Sometimes it looks like it's ignoring @media query and shows "mobile", one by one columns layout.

Reproduction Steps:

It's kind of hard to reproduce. First time I notice the problem was using G Suite's Gmail variation. After opening new email, then pressing show images, email looked like "mobile" version (ignoring @media queries). After going back to main inbox and opening email again it looked "fixed", showing perfectly fine, three column layout. It was about month ago. As for now, it looks fine in G Suite, but at my friend's Gmail above problem happened again, but now email does not fix itself when going back to Gmail's inbox. She's using quite same setup as me, we're both using Macbooks (I've got Air and she's got Pro), we are both using newest versions of Google Chrome and Mac OS High Sierra. At my computer in Inbox/Gmail all those emails looks perfectly fine...

Screenshots:

Broken gmail version: broken-gmail

Ok gmail version: ok-gmail

MJML version:

4.1.0

Email clients the bug is seen on:

Gmail and G Suite in Google Chrome v65+, Mac OS High Sierra.

Possible solutions?

Do you have any idea what might be causing it and how to fix it? As for what's causing I'm guessing Google is serving us both different versions of Gmail and the one she's using does not like @media query and it's stripping code lines containing it and thus layout looks like it should in mobile devices?

As for temp solution we are changing layout by removing columns and using only 100% width blocks, but it's not really a desirable solution, as for we started to use this framework because of it's multicolumn capabilities in the first place.

Any ideas would be much appreciated :)

iRyusa commented 6 years ago

As of today, gmail released a new update for Old gmail interface that entirely remove classes on every element. For now we're not aware if it's a bug or a permanent thing on old gmail.

ngarnier commented 6 years ago

It is indeed a general Gmail issue and looks like it's rendering emails like it used to be doing a few years ago. It will probably be fixed soon on their end, you can read more on this thread: https://litmus.com/community/discussions/7560-old-gmail-completely-broken-as-of-this-morning.

engray commented 6 years ago

@iRyusa, @ngarnier thanks guy, that's good to hear. So maybe we won't have to redesign our newsletter :) Did you ever encounter such a behavior:

First time I notice the problem was using G Suite's Gmail variation. After opening new email, then pressing show images, email looked like "mobile" version (ignoring @media queries). After going back to main inbox and opening email again it looked "fixed", showing perfectly fine, three column layout.

and maybe found a way to fix it?

iRyusa commented 6 years ago

It looks like it has been fixed yesterday on gmail part.

The display image bug is always here, but it's fixed in the new gmail UI anyway and there's no way to prevent it.

sohailkhandev commented 1 year ago

I've already figured out that issue. I can fix such things from my end. If anyone interested. you can mail me at sohailkhandeve@gmail.com