Solved

Why is the mobile preview not the same when sending?

  • 21 July 2021
  • 1 reply
  • 15 views

Badge

Hi, when I do my preview on mobile, the logo on the header of my newsletter si good and appear ok.

When I send it, the header is not the same at all and the logo is huge, which has no quality image.

What can I do to make the header on mobile ok? and look good like the preview?

The preview : 

 

The email I receive : 

 

icon

Best answer by Dov 22 July 2021, 15:29

Hi @vperreault,

Thanks for sharing this with the Community.

First, can you confirm that the preview and the live email are both being viewed on mobile? If the preview is not being viewed on mobile but the live test is, I recommend navigating to the header block and checking to see if there is a mobile only version of this block with a larger logo size. If so, you can adjust this directly in the mobile view of the template, then try sending another live email.

Additionally, we recommend keeping your total message width to 600px so we're able to optimize it for mobile. Under the Styles tab you’ll find Klaviyo’s default settings for mobile optimization. I am including more information on mobile optimization for your emails here.
2017-09-18_13-16-43.png

 

Also, when you say you sent it, were you viewing the email in a thread, forwarded, or within Outlook?

When emails are within an expanded thread, they are technically being forwarded, when an email is forwarded, this cause the HTML to render twice, and can cause style issues - such as showing desktop only blocks on mobile or changing set widths. If the error is occurring when inside a thread/forwarded, then it is expected behavior to have style discrepancies, and we cannot avoid this within Klaviyo.

Lastly, I would try removing the logo entirely, re-sizing the logo image to a smaller size and re-uploading it into a header block, mobile only view and try sending another live email.

View original

1 reply

Userlevel 5
Badge +4

Hi @vperreault,

Thanks for sharing this with the Community.

First, can you confirm that the preview and the live email are both being viewed on mobile? If the preview is not being viewed on mobile but the live test is, I recommend navigating to the header block and checking to see if there is a mobile only version of this block with a larger logo size. If so, you can adjust this directly in the mobile view of the template, then try sending another live email.

Additionally, we recommend keeping your total message width to 600px so we're able to optimize it for mobile. Under the Styles tab you’ll find Klaviyo’s default settings for mobile optimization. I am including more information on mobile optimization for your emails here.
2017-09-18_13-16-43.png

 

Also, when you say you sent it, were you viewing the email in a thread, forwarded, or within Outlook?

When emails are within an expanded thread, they are technically being forwarded, when an email is forwarded, this cause the HTML to render twice, and can cause style issues - such as showing desktop only blocks on mobile or changing set widths. If the error is occurring when inside a thread/forwarded, then it is expected behavior to have style discrepancies, and we cannot avoid this within Klaviyo.

Lastly, I would try removing the logo entirely, re-sizing the logo image to a smaller size and re-uploading it into a header block, mobile only view and try sending another live email.

Reply