Yahoo app now displaying text

Question

I have this email that is acting strange on Yahoo's iOS app (haven't tested on Android). My text is not displaying at all. It's a single row. It renders and looks fine on every device I've tested except Yahoo's iOS app. Help!

<tr>
    <td bgcolor="#e2f4ff" style="padding:0; background-color: #e2f4ff;">
        <table cellspacing="0" cellpadding="0" bgcolor="#e2f4ff" class="firstCopy" width="100%" align="center" border="0" cellpadding="0" cellspacing="0" style="color:#17a0ce !important;padding: 0;border-spacing:0;font-family:sans-serif;color:#333333;background-color: #e2f4ff;">
            <tr>
                <td align="center" class="textCont" lang="textCont" style="font-size: 1.8vmax;padding-top: 4px;color:#17a0ce;line-height: 20px;vertical-align:top;Margin:0;text-align: center !important;font-weight: bold;width:100%;">
                    <span class="tips" lang="tips" style="font-size: 3.2vmax;font-weight: bold; color:#17a0ce;vertical-align:top;">
                        Here are some helpful tips
                    </span>
                    <br />
                    <span class="brand" lang="brand" style="font-size: 2.1vmax; color:#17a0ce;">
                        Brought to You by brand
                    </span>
                </td>
            </tr>
        </table>
    </td>
</tr>

Answer 1

Have you tried using px to define font-size and line-height? Or added px as a fallback for clients that don't support vmax?

I don't know if Yahoo! App specifically has trouble with vmax as unit, but it's not one of the more progressive email clients as far as CSS support, so I wouldn't be surprised if vmax is not supported in Yahoo! App.

Here's a relevant, albeit unresolved question about using .calc() for fluid typography in email.

Answer 2

In my case, the solution was to apply media queries to the text for devices under 600px. Once they were given font sizes (with !important), they displayed without issue.