The Design Renders as Desktop when viewed on Mobile Gmail Client | Voters

The Design Renders as Desktop when viewed on Mobile Gmail Client

complete

Steve Kolt

When the design is made and previewed on Unlayer, the elements adjust accordingly when previewed on mobile and desktop. However, when the actual email is sent, the design still renders as viewed on the desktop on the mobile Gmail client and is not consistent as previewed on the editor.

September 26, 2022

Wioleta Jednaka

Bruno Lemos I still have desktop version on gmail on ioS

Jared Slemp

I noticed this was marked complete but the bug is still there. The two column block does not stack in the Gmail or Outlook app on iPhone (see first screenshot). It stacks fine on the Apple Mail app (see second screenshot).

Bruno Lemos

Jared Slemp: make sure to use the

displayMode: "email"

in the config, and not "web". if that still doesn't fix it, please share the full "design/template json" and the full html you are sending.

Jared Slemp

Bruno Lemos: thanks Bruno. We changed from displayMode: Web to displayMode: Email and that seems to have worked! 
Looking much better on the mobile apps. 
Will report back if we come across any more issues, but looks good so far.

Wioleta Jednaka

Steve Kolt I steal have this problem

the same messages on iphona and android

Bruno Lemos

Wioleta Jednaka: make sure to use

displayMode: "email"

in the config, and not "web". if that still doesn't fix it, please share the full "design/template json" and the full html you are sending.

This post was marked as

complete

Jared Slemp

Not fixed for iPhone, I am still having the issue.

Jared Slemp

In the Gmail mobile app, the "hide on mobile" function works. So it recognizes its a mobile device, but 2 columns dont stack like it is a mobile device for whatever reason.

Jared Slemp

We are having the same issues. 
We have embedded the Unlayer editor, and are using the design:updated callback to retrieve the html and JSON design, and then save them in a local database.
When sending an email, we simply use the html generated from the design:updated callback as the body of the email. 
The issue we are having is that the email is not actively responsive to mobile devices for certain email clients (Gmail and Outlook are the 2 we have identified so far). I have attached 2 screenshots showing what the email looks like on the Apple mail app (text stacked on top of image, which is the 'mobile' view) and on the Gmail app (image and text side by side, which is the 'desktop' view).

Bruno Lemos

Jared Slemp: hello, the email timestamps in these two images are different. were they sent the exact same way? please share how do you use the generated html to send emails. what tool do you use? what steps do you take after copying the html until you send the email? thanks

edit: also, as said in the other comment, please make sure to use the

displayMode: "email"

in the config, and not "web". otherwise you will get this behavior.

This post was marked as

in progress

Anjali Arya

I am also facing the same issue. Mobile preview is not rendering in mobile phones

This post was marked as

under review

This post was marked as

in progress

→