# Email preview looks fine while in gmail looks bad

**URL:** <https://forum.mautic.org/t/email-preview-looks-fine-while-in-gmail-looks-bad/26785>\
**Category:** Product Support\
**Created:** [January 17, 2023, 12:41pm UTC](https://forum.mautic.org/t/email-preview-looks-fine-while-in-gmail-looks-bad/26785 "2023-01-17T12:41:55Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![kongocat](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/kongocat/32/8931_2.png) [@kongocat](https://forum.mautic.org/u/kongocat)\
**Post date:** [January 17, 2023, 12:41pm UTC](https://forum.mautic.org/t/email-preview-looks-fine-while-in-gmail-looks-bad/26785/1 "2023-01-17T12:41:55Z")

</div>

**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](https://us1.discourse-cdn.com/flex020/uploads/mautic/original/2X/2/21dc3ceb8506614efb42e29f779833e1c85f4474.jpeg)

In Gmail  
 ![Untitled-4-Recovered-Recovered-Recovered-Recovered](https://us1.discourse-cdn.com/flex020/uploads/mautic/original/2X/3/321a717dbc74cb25aeab6ba10512d837040be677.jpeg)

These errors are showing in the log:

Steps I have tried to fix the problem:

---

<div class="post-metadata">

**Author:** ![leoschuler](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/leoschuler/32/4798_2.png) [@leoschuler](https://forum.mautic.org/u/leoschuler)\
**Post date:** [January 17, 2023, 1:13pm UTC](https://forum.mautic.org/t/email-preview-looks-fine-while-in-gmail-looks-bad/26785/2 "2023-01-17T13:13:13Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![kongocat](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/kongocat/32/8931_2.png) [@kongocat](https://forum.mautic.org/u/kongocat)\
**Post date:** [January 17, 2023, 1:53pm UTC](https://forum.mautic.org/t/email-preview-looks-fine-while-in-gmail-looks-bad/26785/3 "2023-01-17T13:53:44Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![leoschuler](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/leoschuler/32/4798_2.png) [@leoschuler](https://forum.mautic.org/u/leoschuler)\
**Post date:** [January 17, 2023, 2:05pm UTC](https://forum.mautic.org/t/email-preview-looks-fine-while-in-gmail-looks-bad/26785/4 "2023-01-17T14:05:11Z")

</div>

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](http://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](https://www.caniemail.com/search/?s=id%20selector)

---

<div class="post-metadata">

**Author:** ![kongocat](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/kongocat/32/8931_2.png) [@kongocat](https://forum.mautic.org/u/kongocat)\
**Post date:** [January 17, 2023, 2:14pm UTC](https://forum.mautic.org/t/email-preview-looks-fine-while-in-gmail-looks-bad/26785/5 "2023-01-17T14:14:25Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![joeyk](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/joeyk/32/11164_2.png) [@joeyk](https://forum.mautic.org/u/joeyk)\
**Post date:** [January 17, 2023, 7:01pm UTC](https://forum.mautic.org/t/email-preview-looks-fine-while-in-gmail-looks-bad/26785/6 "2023-01-17T19:01:23Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![kongocat](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/kongocat/32/8931_2.png) [@kongocat](https://forum.mautic.org/u/kongocat)\
**Post date:** [January 18, 2023, 8:08pm UTC](https://forum.mautic.org/t/email-preview-looks-fine-while-in-gmail-looks-bad/26785/7 "2023-01-18T20:08:57Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![mikew](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/mikew/32/5156_2.png) [@mikew](https://forum.mautic.org/u/mikew)\
**Post date:** [January 19, 2023, 8:35am UTC](https://forum.mautic.org/t/email-preview-looks-fine-while-in-gmail-looks-bad/26785/8 "2023-01-19T08:35:16Z")

</div>

miml is the way to go: [Email Editor](https://mjml.io/try-it-live).

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

---

<div class="post-metadata">

**Author:** ![kongocat](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/kongocat/32/8931_2.png) [@kongocat](https://forum.mautic.org/u/kongocat)\
**Post date:** [January 19, 2023, 9:12am UTC](https://forum.mautic.org/t/email-preview-looks-fine-while-in-gmail-looks-bad/26785/9 "2023-01-19T09:12:28Z")

</div>

Sounds good! Thanks

---

<div class="post-metadata">

**Author:** ![techbill](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/techbill/32/8325_2.png) [@techbill](https://forum.mautic.org/u/techbill)\
**Post date:** [January 19, 2023, 2:06pm UTC](https://forum.mautic.org/t/email-preview-looks-fine-while-in-gmail-looks-bad/26785/10 "2023-01-19T14:06:48Z")

</div>

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.