search

mjmlio / mjml

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

mj-section is stacking in Outlook desktop app #1684

Closed peteraccountbox closed 5 years ago

peteraccountbox commented 5 years ago

Sections are staking one by one mj-sections are stacking in outlook desktop app. Its working fine in web versions of Gmail and outlook.

Attaching the MJML code to verify this.

mjml.txt html.txt

Expected behavior mjml tags work the same in all environments.

MJML environment (please complete the following information):

Email sending environment(for rendering issues):

Affected email clients (for rendering issues):

Screenshots Outlook Desktop: https://i.snipboard.io/uKVnva.jpg Outlook Web version : https://i.snipboard.io/iqxmCY.jpg - Working fine

Additional context Add any other context about the problem here.

iRyusa commented 5 years ago

I don't know if this specific version of outlook is fully supported (it does backup properly to mobile version so not a real issue here), but you should test with putsmail.com if it does the same.

fredyfx commented 5 years ago

@peteraccountbox try to avoid using custom CSS with media queries. Let the framework handle for you.

peteraccountbox commented 5 years ago

Hi Mjmlio/Mjml,

Thanks for the suggestion. We will delete custom css from our end.

There is an other issue with images. Image width/height are not taking in Outlook app. They are always as big as it is even we specify the size. Working as expected in web versions.

Any help ?

On Tue, Aug 20, 2019 at 11:57 PM Fredy Guibert notifications@github.com wrote:

@peteraccountbox https://github.com/peteraccountbox try to avoid using custom CSS with media queries. Let the framework handle for you.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/mjmlio/mjml/issues/1684?email_source=notifications&email_token=AF56WV5ENKO5HUOQUWKMJK3QFQZPRA5CNFSM4INVJW7KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD4XHNPQ#issuecomment-523138750, or mute the thread https://github.com/notifications/unsubscribe-auth/AF56WV4HNRMHRP7ZSWG7P7LQFQZPRANCNFSM4INVJW7A .

--

Best regards,

Peter Ross

Marketer - @EngageBay

Email: peter@engagebay.com

kmcb777 commented 5 years ago

@peteraccountbox mj-images width and height should work in outlook desktop, do you have any mjml so that we can reproduce ? It's ok with the template you provided.

And i agree with fredyfx, you shouldn't use so much custom css except for specific use cases or media queries. i. e. i see you use box-sizing: border-box somewhere, it's not supported on all mail clients so you can expect inconsistent rendering. Also i see on emailonacid that on outlook 2013+ your "SHOP All Wines" button don't respect the left margin and is stuck to the image, and all this custom css makes it hard to know why it does that.

peteraccountbox commented 5 years ago

Hi Mjmlio/Mjml,

For your reference Outlook Web : https://i.snipboard.io/80iQWo.jpg Outlook Desktop : https://i.snipboard.io/6BLJSl.jpg

You can observe the big sizes in desktop app.

Attaching the mjml template html.txt mjml.txt

steve-taylor commented 5 years ago

There is an other issue with images.

Consider closing this issue (resolved by not using custom CSS) and create a separate issue for large images in Outlook Desktop.

kmcb777 commented 5 years ago

@peteraccountbox Here you're using regular html img tags in a mj-text, so you can get issues. Many mjml components create specific wrappers for outlook to handle it. Btw for this images you should use mj-social, it's made exactly for this. I close the issue since the problem is not related to mjml