Skip to main content
K
Kana_Lai
Level 3
September 4, 2019
Question

Email display issues on Outlook App on iPhone XS

  • September 4, 2019
  • 3 replies
  • 7493 views
Email display issues on Outlook App on iPhone XS I'm running into a display issue with my email template that only occurs on the Outlook App on iPhone XS specifically. The same email displays correctly on other iPhone versions and other email clients. The Problem: On iPhone XS Outlook App (INCORRECT): The footer section covers/overlays almost all content between the hero image and the footer itself. You can see the hero image and main title at the top, but then the footer appears to overlay everything below it. On Other iPhones (CORRECT): All content displays in the proper order - hero, title, body content sections, then footer at the bottom. Template Overview: This is a modular Marketo email template with a table-based layout (640px wide main container) that uses: Extensive inline styles for email client compatibility Multiple media queries for responsive design MSO conditional comments for Outlook desktop Many editable modules (Banner, Title, FreeText, Articles in 2/3 columns, Products, etc.) Marketo variables for colors, spacing, and content Key Structure: html
What's New in SOLIDWORKS 2020
Seating is Limited: Reserve Now

Join our GoEngineer hosted "What's New in SOLIDWORKS 2020" launch event. Product expert tables are back! Bring your questions for your favorite Application Engineer as you enjoy food, beverages, and good company.

Your local Application Engineer will present live and in person on the important enhancements to the SOLIDWORKS solution portfolio that will help speed up and improve your product development process -- from conceptual design through manufacturing.
More Info

Learn more about the events
${Articles3Col-LButton-Text}
Find an Event

See event dates and times in your area
${Articles3Col-CButton-Text}
Watch Recording

Cant make it? Sign up here to watch recording.
${Articles3Col-RButton-Text}
GoEngineer delivers software, technology and expertise that enable companies to unlock innovation. With more than 35 years' experience and tens of thousands of multi-industry customers, GoEngineer provides best-in-class design solutions from SOLIDWORKS, Stratasys, Desktop Metal, Creaform, CAMWorks and Product Lifecycle Management (PLM).

GoEngineer has multiple office locations throughout the United States. View all locations.

Please help us make sure you get the email communications you prefer. Adjust your EMAIL PREFERENCES.
What's happening: After the hero banner and title display correctly, all the body content (FreeText module, Articles 3-column module, and any other content modules) should appear before the footer. However, on iPhone XS with the Outlook app specifically, the footer appears to float on top of or cover this middle content section. The footer itself displays normally, but it's positioned incorrectly - overlaying the content instead of appearing at the bottom after all content has been displayed. The template uses standard table-based email layout techniques with inline styles, responsive media queries at 640px and 479px breakpoints, and Marketo's module system. The issue is isolated to iPhone XS + Outlook app combination.
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

3 replies

Josh_Pickles
Josh_Pickles
Level 5
September 4, 2019

Hi Kana,

Can you please make sure the HTML is readable by using the Syntax Highlighter => HTML/XML option - You will need to edit your post to make this change. This will make it easier for people to work out what is happening within your email.

K
Kana_LaiAuthor
Level 3
September 4, 2019

Sorry, I didn't know how to do that before. Does it look better now?

Josh_Pickles
Josh_Pickles
Level 5
September 4, 2019

Thanks Kana. 

Can you please make sure you've pasted in the HTML and CSS for the whole email? Your snippet is only part of the body and the issue may sit outside of this.

Casey_Grimes2
Casey_Grimes2
Level 10
September 5, 2019

Hi Kana,

There's several things to unpack here in this code:

  • One of the first things that jumped out to me was your CSS order—you generally want your MSO declarations under your normal declarations. 
  • Most of the selectors here are written in an older style that was previously needed for Yahoo, but no longer needed--and more importantly, when they're marked up this way, they cause any rules written that way to fail for Gmail/Gmail App. Essentially, you want to translate selectors like table[class="table600"] to  table.table600 , *[class].main  to .main, etc. If these are being used, they'll cause everything inside that <style> block to be ignored. Thus, you want to avoid using them where you can and when they're truly necessary, place inside separate style blocks.
  • Because you are using a custom web font by default and not providing a proper backup, Outlook is failing and defaulting back to Times New Roman. If Outlook doesn't know the font, it won't go further down the family list. Adding the style property mso-generic-font-family:swiss; will force it to default to sans-serif instead.

I can't tell exactly why the responsive design isn't being honored as the parent tags look correct and debugging it would take a chunk of time, but I hope that at least helps you get on the right path.

    Nongalei_Soram
    Nongalei_Soram
    Level 1
    September 6, 2019

    Hi Kana,

    Please try adding the following sections in your HTML code to make it responsive in Outlook versions:

    • I see the mso code is missing from the css, which is needed for the font to render in outlook versions.
    • For mobile versions of smaller screens, the media query/ CSS code is missing from your HTML. 

    You may need an HTML expert to help you with the responsive coding.

    Example of CSS code for outlook specifications:

    <!--[if mso]>
    <style> body,table tr,table td,a, p, span,table.MsoNormalTable { font-family:Arial, Helvetica, sans-serif !important; font-size:14px!important; }</style>
    <![endif]-->

    Hope it helps you to troubleshoot the issues here!

    Thanks,
    Nongalei

    Terms & ConditionsAccessibility statement

    Loading footer...