Email preview looks fine while in gmail looks bad

Your software
My Mautic version is: 4.4.5
My PHP version is: 7.4.33

Your problem
My problem is:
I took the blank generic email theme and made it rtl with lang=“he” and some minor chages.
The email was then edited i saved it and looked at the preview and it looks fine - as it should.
After sending an example to gmail I look bad in gmail as the image sizing is not working.

Mautic preview
Untitled-4-Recovered-Recovered-Recovered-Recovered1

In Gmail
Untitled-4-Recovered-Recovered-Recovered-Recovered

These errors are showing in the log:

Steps I have tried to fix the problem:

make sure all images have the width and height attributes, check if the other pictures uses inline styles and copy them to the new images as well.

Sounds like the right way to do it but when using the builder I expect not to touch the html or touch is as little as possible.

In this case the builder set a

<style>..with the styling for #ids ..</style>

on the end of the page.
The page included elemets with the same ids and preview works as it should.

In google the style section is not found and the ids were changed to something else.
So the css is actually not found at all and each image has its original size.

Is that what I should expect from the builder inside emails?

Html and css are handle differently from a regular web page and the e-mail reader.

there are a lot of security concerns that a e-mail client/webmail have to deal that a web page doesn’t mind, imagine if you could style a link in your e-mail that is positioned on top of your gmail inbox link, for example, if those kind of styling was possible there would be a lot of fraud and security breaches.

additionally, every e-mail client have their own set of rules on how to handle those things.

as a rule of thumb my recommendation is to always use inline styles instead of css rules and use html attributes as much as possible instead of relying on the css tag.

now, if you want to go deep in the rabbit hole, and find out what really works on what, I recommend you the can I email site (www.canIemail.com) where it test and catalog of what works on what.

if you want to see how the css id selector is supported among the e-mail clients, for example, check this page: Can I email… Search

Thanks, I fully agee and I fully work like that when I write the entire html for an email.

But, the builder in mautic which is an emailing software and to make it more precise when used in an email theme - I expect it to be “good habits compliant”.

I am not sure if it is what it is and this how the the builder is working - or - that I am doing sometning which basically done in a wrong way.

I would use mjml, a lot more reliable then any other tool. It takes a bit time to get used to it but its worth the time investment.

Thanks yes it looks like a good solution.

But it is not in the scope of my current project.
I need to provide a good enough drag and drop tool so creating an email or page is simple and reliable.

miml is the way to go: Email Editor.

I would create the template in mjml, then make it into a Mautic template for emails, then you can use the drag and drop no problem. Just need to make sure you are explaining about coloumns, sections and models inside correctly

1 Like

Sounds good! Thanks

It what I do.

Create emails with mjml framework then convert it into template for Mautic where our communication staff can use the template to switch out picture or text by dragging and drop before sending it off to clients and customers.