Skip to main content

Notifications

Customer experience | Sales, Customer Insights,...
Answered

Email template not responsive on mobile

Posted on by 5

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!

  • Verified answer
    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 Profile Picture
    Akhi on at
    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 Profile Picture
    AliDoy 5 on at
    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 Profile Picture
    mneumayer 641 on at
    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

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

December Spotlight Star - Muhammad Affan

Congratulations to a top community star!

Community AMA December 12th

Join us as we continue to demystify the Dynamics 365 Contact Center

New! Quick response templatesâš¡

Save time with the new custom templates!

Leaderboard

#1
André Arnaud de Calavon Profile Picture

André Arnaud de Cal... 291,232 Super User 2024 Season 2

#2
Martin Dráb Profile Picture

Martin Dráb 230,064 Most Valuable Professional

#3
nmaenpaa Profile Picture

nmaenpaa 101,156

Leaderboard

Featured topics

Product updates

Dynamics 365 release plans