Layout break in Gmail and Outlook


#1

Hi!

As per report, the layout are different in Gmail and Outlook, attached in the json as per request.

https://drive.google.com/open?id=0B07Kd1VkaOuSWUpES0VxV1VKSlk

Thanks!


#2

Let’s leave your issue here:

Layout still break in some platform, example GMail doesn’t have the image align properly (left image right text become top and bottom), offline Outllook have some issue for example title cannot align middle, divider have background color but in outlook show white, social icon not aligning properly.

Thanks for your topic, I’ll check and I’ll return with an answer :slight_smile:


#3

Unfortunately I can’t check in outlook, but in Gmail at mine it’s Ok!


#4

In my Gmail it appear to be like this:

May I know how you test send the email?


#5

Also for my outlook, attached are the screenshot:

The title and the social icon are not aligning properly, the title should be in middle and the icon are cut


#6

Looks like there’s also an open issue for Gmail as stated here: https://github.com/mjmlio/mjml/issues/40


#7

@MiloKhoo what browser and OS do you use?

Looks like this is a issue with MJML!


#8

I’m using Google Chrome: Version 59.0.3071.115 (Official Build) (64-bit)
OS: Windows 10

Do you have any idea how to work around the Gmail issue?


#9

Also noticed another issue with the image, if I enter % in width of image, when render, it become 100px instead, but it’s showing correctly in email builder though


#10

That’s because MJML doesn’t understand %, if you want to make 100%, just put there 600px!


#11

Just a suggestion, perhaps in future you can add a checkbox for the image to enable full width, because end-user doesn’t really know about 100% or 600px. :rofl:


#12

I thought about that ))


#13

Hi! Any idea for the problem for Outlook layout?


#14

Hi! Any update? )))))


#15

Hi, sorry for late reply, unfortunately nope! This issue MJML team needs to solve :wink: