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!
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!
Hello ,
I suggest you create a support ticket for professional assistance following the below procedure.
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.
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
Stay up to date on forum activity by subscribing. You can also customize your in-app and email Notification settings across all subscriptions.
André Arnaud de Cal... 291,232 Super User 2024 Season 2
Martin Dráb 230,064 Most Valuable Professional
nmaenpaa 101,156