Skip to main content

Hi Guys, I am having some issues with the formatting of an email. It is an issue I have not encountered before and I am hoping you may be able to help. The email has a Typeform survey embedded, which we have not done before and so I am wondering if this is causing the issue. 

 

When I send an email preview to myself (on a Mac) it is showing absolutely fine, but my colleagues (on a PC) have issues viewing the content. The phone previews are absolutely fine, it is desktop that seems to be the issue. It is showing these black squares and the positioning of the blocks is completely off. The following image is what can be seen by them, and this is after pressing the download content button.

 

p.s. if you. are based in the UK and you do fancy winning a year’s supply (we’ve changed from a month to a year!), feel free to subscribe to FUEL10Ks emails.

Thanks in advance for your help!

Megan

Hey @Megan Surman 

Welcome to the Klaviyo Community!

What email service provider are you viewing this email on? Outlook sometimes skews HTML emails because all versions since Outlook 2007 use Microsoft Word to render HTML/CSS. Because of this, an email display may look slightly off in newer versions of Outlook from what you initially design and preview in Klaviyo. If it’s not Outlook, do you have different desktop and mobile settings on the template?

 


Hi @stephen.trumble thanks so much for replying!

Yes, they are being viewed on Outlook, both from my Mac and also my colleagues laptop (which is the one showing these black blocks when I send a test preview). Is there a way to ensure that this doesn’t happen? We’ve never had this issue with previous emails, so I am not sure if it is the integrated Typeform causing it. Thanks, Megan


:-) Outlook sometimes skews HTML :-)…

Make that it Always skews HTML ;-)

Outlook on Ios is the worse!

 

@Megan Surman the best way to go about this is to add height and width as static html code. I shared information about solving this in this post

 

I'll repost it here, hope it helps:

The way Klaviyo renders the image block at the moment (with the old editor) uses styles to size the image. Outlook does not look at css styles and completely disregard these and blows up the images.

In order to make sure the image is a fixed size I would recommend using a text block and adding that image in the text block. Then click the code button (Switch to HTML view) and add width= and height= to that specific image section (see example below).

 


HI @Omar thanks so much! I shall give this a go :) 


Hey @Megan Surman 

Let @Omar and myself know how it goes! Please share any learning you may have, I know it will help some others in the community!


Reply