I am having a display issue with the confirm subscription email on mobile. Hoping someone can help. I am receiving the confirmation emails very small on mobile, while the emails look just fine on desktop. The mobile preview in the editor looks fine, like this:
But when it is received in both my ios inbox as well as in the gmail app, it appears like this:
I have compared all settings to other templates that are displaying just fine in mobile, and made similar settings in this form. I have the form width set to 600 px. The editor for this email form is rather limited and seems like the classic editor, so not really much to play around with. Am I missing something?
Thanks in Advance!
Best answer by Taylor TarpleyView original
Thanks for sharing your question with us, happy to help!
So unfortunately, Gmail App doesn't support medial query and its default is to show the desktop display, why the mobile confirmation email doesn’t look as it does in the mobile view editor. In this case, there are a few outcomes that may occur when a media query is not supported, which you’ve experienced:
While our desktop/mobile view editor tries to give a general feel what a user will likely see on each device, the most accurate way to confirm what an email will look in an email or phone would be to send a test email or use other resources such as litmus.com and emailonacid.com for more a more accurate preview of emails.
Thanks for participating in the Community!
Thanks for your response,
So there is no solution for this mobile display error? I find it odd that Klaviyo, with all its functionality doesn’t have a way to properly display this opt in email. As it is often the first email a potential customer may receive from a company, it does not instill customer confidence that a company “has their stuff together”.
do you know if this issue is being addressed anytime soon?
Very sorry about the delay, happy to share about this further!
The issue is due to how Gmail app and ios is rending the message, not a Klaviyo issue. However, I would utilize the resources mentioned previously to workaround this.
I wonder if any Champions or other superusers can share their strategies around their experience with the Gmail app?
@Mailbox Manny, @In the Inbox, @retention ?
Wondering if there are any other strategies we can employ or consider when working with the limitations of the app?
So, I think this is a pretty big problem, and I know it’s not all the fault of Klaviyo, but *FOR SURE* Klaviyo could give us more editing/styling options.
If I set the page background to a color and the form background to transparent, everything renders fine on desktop, but on mobile (iOS), all backgrounds render white except for a bar across the top (which is the correct color I’ve set).
When I set BOTH backgrounds to the same color, the desktop version once again renders correctly, but now only the form background renders on mobile (with form width set to 600).
In addition to this background problem there’s also a problem with the font sizing. In the editor, if I set the font size to 18px, that’s exactly how it renders on desktop. However, on mobile, it renders something significantly smaller. So small, that I need to Zoom in to read it.
But then, if I adjust the size to 28px so that I can read it in mobile, it’s absolutely huge on desktop.
I understand the company line is still going to be “it’s not our fault, it’s Apple’s” and probably there will be no suggestions you can give me, but like I said, you absolutely can make the editor much more flexible and give us more options.
And however the editor’s code is written such that the form background can render properly, surely the page background code can be written in the same way so that they both render the same on mobile.
Anyways, as it stands now, the only way to make sure this email looks good, is to set all backgrounds white...which really sucks in the day and age of dark mode responsive. I wish there were a workaround to this email, but at this point, there is not, so we are all stuck sending extremely unprofessional and/or behind-the-times opt-in confirmations.