Email template not responsive on mobile

(0) Share

Report

Posted on by AliDoy

Hello! I have set up an email template that is a mix of 1- and 2-column sections. I have set the 2-column sections to wrap on mobile, which works for some mobile clients, but in others (I have tested gmail app and gmail web), the columns do not stack, resulting in some odd formatting (skinny text columns, squished photos, etc). The responsive formatting looks as expected in the mobile preview in Dynamics.

I saw this "solution" in the forum: https://community.dynamics.com/365/marketing/f/dynamics-365-for-marketing-forum/406973/responsive-email-on-mobile#answers

and added the media query to my html as indicated, but this didn't help. I also tried adding duplicate sections that have the 2-column content in 1-row stacks instead, then selectively hiding for mobile and desktop, but this also did not work. Help!

All responses (4)

Answers (1)

Verified answer

Jelena Rajkovic on at

Like (0)

Report

RE: Email template not responsive on mobile

Hello.

For the new emails the style added for responsiveness is added in post processing and it's visible in the Preview tab, while we enable automatic update of style using attribute data-layout-version="v2" to the first(layout) div element in the HTML body. The style tag in the HTML tab only contains the general styles that can be set up for the email (email background color, text color, etc...).

The issue with Gmail applications is that any even minor change in CSS styles can break and invalidate the whole style tag with CSS styles. Using CSS style and ">" character for example is not supported and will break Dynamic styles as well as any custom styles added. There are other cases also, so you can try first removing the custom style while investigating to make sure there is no added styles that break the Gmail responsiveness. If the issue is still present, then there can be issue on Dynamic side.

Also, please keep any email address that is not a Gmail address will not support responsiveness and media queries because this is a Gmail limitation.

Hope this helps clarify some things.

If the issue is still present, please share the HTML code here or create a Support Request so we can provide more help with this issue.

Thank you!
Suggested answer

Akhi on at

Like (0)

Report

RE: Email template not responsive on mobile

Hello ,

I suggest you create a support ticket for professional assistance following the below procedure.

Get Help + Support - Dynamics | Microsoft Docs
Suggested answer

AliDoy 5 on at

Like (0)

Report

RE: Email template not responsive on mobile

Hello! Thanks for the reply. I had only done very minor customization (type styling) in the css. I figured out a solution to the non-responsiveness, and wanted to post here for anyone searching in the future. I had started with a 1-column template and added some 2-column sections to it. When I tried the reverse (rebuilding with a 2-column template as the basis, and adding 1-column sections where I wanted them) the template behaves as it should on mobile, with the columns stacking instead of appearing super skinny side-by-side.
mneumayer 641 on at

Like (0)

Report

RE: Email template not responsive on mobile

Hey can you post your HTML Code by any chance?

It is hard so aid without the code for testing purposes. But it is true that different email clients render elements differently plus on mobile there is a difference between browser and app. From my point of view the focus on mobile should be on mobile app since it is the most common scenario a user opens the emails on their device.

Did you do any adaption with custom css/html?

Best regards,

Mario