Skip to main content
Solved

Short HTML email extending limitlessly when shown in preview window

  • January 19, 2021
  • 1 reply
  • 73 views

Forum|alt.badge.img+2

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. ​​​​​​​

Best answer by cassy.lee

Hi @zendall

Thanks for sharing this to the Community. It’s definitely an interesting/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 result means that your code for this template is reacting to Klaviyo's 'back end' previewing. Have you taken a look to see that your CSS measurements are clearly defined - as in, does your HTML 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.asp

The 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. 

View original
Did this topic or the replies in the thread help you find an answer to your question?

1 reply

cassy.lee
Forum|alt.badge.img+9
  • Klaviyo Alum
  • 271 replies
  • Answer
  • February 24, 2021

Hi @zendall

Thanks for sharing this to the Community. It’s definitely an interesting/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 result means that your code for this template is reacting to Klaviyo's 'back end' previewing. Have you taken a look to see that your CSS measurements are clearly defined - as in, does your HTML 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.asp

The 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.