Solved

Mobile Only sections not working? Show in preview but not when sending

  • 22 September 2021
  • 8 replies
  • 1108 views
Z
Rank
Badge +2

Hi -

I have built an email within the template builder. There are a couple sections that are desktop only, and a couple sections that are mobile only. 

 

When I preview the email, everything looks perfect, and the mobile & desktop versions are different as they should be.

 

However, when I actually send the email, I receive the desktop version even when opening the email on a mobile device. I have tested this with a number of mobile phones, and only the desktop version is being received. Why is this occurring, and how do I fix it? 

 

And yes, I have Mobile Optimizations enabled: 

 

icon

Best answer by alex.hong 22 September 2021, 23:29

View original

8 replies

alex.hong
Userlevel 7
Badge +58

Hi @zag4242,

Thanks for posting to the Community and hope to give some insight to what might be causing this problem.

 

In order to understand what might be causing this, do you mind responding to some preliminary questions?

To start, would you share screenshots of your template block settings under Block Styles to ensure that they are desktop only selected for sure and not mobile and desktop?

What email client are you using to view the mobile emails with? Sometimes, depending on browser this can cause some technical issues.

In order to test these emails, are you by chance forwarding the email or sending it directly to users? Forwarding in general has a tendency to break the html in emails, which can then cause the separate blocks to both render in the inbox of the person the email has been forwarded to, and we do not have any way on our end to prevent this. Of course, the best way around this would be to use a single block that will display on both desktop and mobile device. I think once we get the answer to these, it will help narrow down what might be causing the problem.

 

Thank you!

Alex

Z
Rank
Badge +2

Hi @alex.hong 

 

Thank you for the reply! Let me clarify my issue - the loss in formatting only occurs when I export the HTML. If I send it directly from Klaviyo as a test email, it seems to be working fine. Perhaps some of the CSS is lost when it’s exported?

Please see screenshots below of my template block settings for the section I would like as mobile only.

I have tested this using both gmail & Zoho, and on an iPhone Xr and iPhone 8. So the issue does not appear to be related to the email client or device. 

I am not forwarding the email. 

Thanks! 

 

 

 

alex.hong
Userlevel 7
Badge +58

Hi @zag4242,

 

No problem and thanks for the follow up with clarifying points!

There have been reports before that I’ve seen where users have run into issues with mobile formatting upon exporting the html to test. One instance I have seen is that Gmail will add extra padding and mess up a format; Unfortunately the extra padding they have added is out of our control unless you go in and manually add some extra code in yourself, and it looks like there are flaws with that. It looks like someone in this Litmus community has figured out a workaround. 

Where are you exporting / pasting the html code into after getting it from the template builder?

 

Y
Rank
Badge

Hi @alex.hong . I have some issues while creating email template.

  1. There no 2 columns view at Yahoo mailer, only 100% displayed blocks
  2. In some mailers i see only mobile blocks, but in your editor blocks are hided.

Mobile optimization is turned on.

 

 

Very strange behavior. Can you help me?

alex.hong
Userlevel 7
Badge +58

Hi there @Yuriy,

Could you let us know what device you are using to test these email templates? We have seen before that the Yahoo app for Android does not render Media Queries, as of yet. Media queries are a form of CSS (a styling code language) that instructs how elements should render/look on mobile or smaller screen sizes. More information on Yahoo Android CSS can be found here. In which case, unfortunately, the only workaround to resolve this in Klaviyo, would be to use one block set to show on desktop and mobile, in order to resolve both blocks showing on Android Yahoo. 

However, if you are using a different device + mailing service to test and it still does this, we know where to narrow down the possible reasons for this issue.

 

Thank you!
Alex

Y
Rank
Badge

Hi, Alex.

Thank for you reply.

Please take a look a little closer. Works fine in gmail, but still have issues in Yahoo

Browser: Brave, MacOS

 

Y
Rank
Badge

Hi, Alex @alex.hong 

Can you help me with my previous issue?

alex.hong
Userlevel 7
Badge +58

Hey there @Yuriy,

First, if you are not doing so already, I would recommend taking advantage of the table block feature in our template editor to better format these sort of issues. Along side that, I would make sure the desktop/mobile settings are correctly implemented so that there is no formatting issue where you might see improper layout when accessing your email.  In terms of the desktop showing on mobile, that’s either due to an incorrect setting in the block styles tab or the inbox provider is not respecting the media queries. The second could be the case since Yahoo tends to have problems with understanding CSS, which returns misaligned or odd behavior elements. 

If going over those steps and double checking your processes did not assist, I would recommend you contact support as they can take a deep dive into your template and see what the issue might be precisely. 

 

Thank you!
Alex

Reply


Most helpful members this week

Terms & ConditionsCookie settings

Links & Resources

Platforms

Partners

Useful Things

About

  • Terms and Privacy
    © 2022 Klaviyo All rights reserved. Klaviyo and the Klaviyo logo are trademarks or registered trademarks of Klaviyo, Inc. or its affiliates.