Short HTML email extending limitlessly when shown in preview window

Question

Hey all,

I’m looking to set up a bit more of a refined abandoned email cart flow for customers. In this I have a HTML that when I send it to myself (in gmail) looks fine. However, when I try preview it within Klaviyo it will extend indefinitely.

This is how it looks in the preview window:

And this is how it looks in gmail.

Now, you might say, “who cares, it works when you send it” but this indefinite width also shows on another persons email app (Edision Mail), So I think it’s a problem more and more people may have and I’d like to avoid that to make it look perfect on (most) device types.

cassy.lee · Accepted Answer

Hi@zendall,Thanks for sharing this to the Community. It’s definitely aninteresting/tricky one since it is just the previewer that is having issues and not the actual email send. Without being able to look at your code, it’s possible that this resultmeans that your code for this template is reacting to Klaviyo's 'back end'previewing. Have you taken a look to see that yourCSS measurements are clearly defined - as in, does yourHTML have width: 600px, as suggested in this article for Optimal Email Template Width?Additionally, or alternatively, you might want to look into adding in Viewport CSS if that’s not something you are currently using. More details on that here:https://www.w3schools.com/css/css_rwd_viewport.aspThe Viewport might be more applicable towards device variation, rather than your original point about Edision Mail (I’m not familiar with that ESP unfortunately, so I can’t say for sure), but it might be helpful to look into these two options first.-Cass.

Reply

Sign up

Use your Klaviyo credentials

Log in to the Community

Use your Klaviyo credentials

Scanning file for viruses.

This file cannot be downloaded