Email Layout

Hi @Jbatton, 

I apologize that you’ve experienced these template issues! 

If you have ensured that every block in your template that shifted left is set to ‘Center’ alignment, this issue might be due to how devices and inboxes render code and whether or not your email is optimized for mobile viewing. All email clients and devices render images differently depending on various factors such as how the providers deciphers HTML code or a screen’s dimensions. As these rendering variations can occur, especially on mobile devices, we recommend our customers utilize services like as EmailOnAcid or Litmus. These tools allow you to view how your device will display on a variety of email providers and devices to catch any potential error before your email sends. However, until then, I’d recommend testing how your campaign will display on mobile by sending a test email to yourself, rather than previewing it in Klaviyo from now on. There is another Community Post I’d recommend checking out that deals with a similar issue of an email campaign’s layout issues on a mobile device. 

Additionally, I’d suggest investigating your image width size and whether or not your ‘Enable Optimization’ setting is set to ‘Yes’. The Optimal Email Width, especially for mobile devices, is 600px. You can investigate your currently width size by navigation to the the Styles tab of your Email Template Editor. Emails or images in the email designed to be much wider have a higher potential to look skewed when scaled down on a mobile device unless the email was carefully designed and optimized for this. This is why we encourage you to avoid increasing your template width beyond 600px unless you have a designer and/or other dedicated resources to optimize your layout across clients/devices. When it comes to the ‘optimization’ setting, campaigns are generally defaulted to Optimize Your Emails for Mobile Viewing. However, if the condition was ever turned off, this could be a reason why your template is uneven. This is explained further in the Help Article linked previously and this Community thread below.

Finally, images can duplicate in a campaign if an image or logo block has conflicting messages on when render, outlined in the Community Post below. For instance, I would ensure that your top image block isn’t set to view in ‘Both Desktop and Mobile’ on your Desktop View and is also set to ‘Only Display on Mobile’ in your mobile view. You can toggle between desktop and mobile view, by clicking on the different icons in the top left corner of your template editor. 

Let me know if you are still experiencing issues after investigating these options! 

Best,

Taylor