Hi @lavc and @hashimumar,
Thanks for sharing your question with the Community!
Unfortunately, Outlook is one of the trickiest providers to work with for various reasons, we have provided further documentation in our Help Center: Why Does my Email Look Different In Outlook. Basically, from Outlook 2007 onwards, Microsoft stopped using Internet Explorer to render emails and instead opted to use Microsoft Word as its rendering engine. This is awful for email marketers and developers who use HTML. Try copying and pasting an HTML web page into a Word document and you’ll get a glimpse as to how Word translates HTML. There is not much control Klaviyo has over how Outlook renders images/styles.
Optimizing an email specifically for recent versions of Outlook can take a lot of time and extensive testing, as there are no established guidelines. Doing this also requires making significant changes to how images are positioned, and this can skew how emails render across other email clients and devices.
For instance, Outlook has the following issues
- No support for background images in divs and table cells
- No support for CSS float or position
- No support for text shadow
- Poor support for padding and margin
- Poor support for CSS width and height
- Problems with nested elements background colors
You can use tools like Litmus or Email on Acid to test your messages on various devices. Additionally, Litmus wrote an insightful article to further explain Rendering Differences in Microsoft Outlook Clients.
Finally, a fellow user had a similar issue optimizing their emails for Outlook.
Thanks for being a part o the Community!
-Taylor
I am having the same issues except it is rendering incorrectly with Gmail, though not consistently. Some of my templates are perfect, some padding is off and its duplicating lines and other elements...
Hi @Cantik,
Thanks for sharing your question with us!
Do you mind sharing whether or not you saw these issues when you or your customer were on the internet accessing their gmail account vs. actually using the gmail app to view the email, such as viewing it on Gmail.com? If you can ensure you have mobile optimization turned on and there is no external inline code in your blocks, this can be done by navigating into the source code of your bocks, then it would seem that the display issues you’re mentioning an issue of Google Chrome Browser Version not supporting media queries. Media queries are CSS statements that render content in mobile screen sizes, so it tells mobile only/desktop only to show at the appropriate screen size.
So, unfortunately this cannot be controlled in Klaviyo it is dependent on the email client. All of the listed environments that do render media queries will show the correct blocks. This can be explained further in these similar Community topics I’d suggest checking out to gain more insight.
Additionally, if it should be noted that there is a bug with padding being off in the new template editor that our team is actively working to fix. I would also recommend using tools like Litmus or Email on Acid to test your messages on various devices.
Thank you for participating in the Community! Hope this helps!
-Taylor
