Force the correct font-size in Blackberry for rend

Question

I'm working on an html email that needs to render well on the Blackberry OS. The formatting of the text keeps getting blown up in Blackberry, see screenshots.

Blackberry ------------ Correct ------------

Here is my current code -

<table cellpadding="0" cellspacing="0" border="0" width="100%" align="center" style="background-color:#000000 !important;padding:0;" bgcolor="#000000">
 <tr>
  <td style="color:#ffffff;font-size:12px;background-color:#000000;" bgcolor="#000000" valign="top">
    <span style="font-weight:bold;font-size:22px;mso-line-height-rule:exactly; line-height:24px;">
       Aliquam Commodo Velit vel Ipsum
    </span>
    <span style="mso-line-height-rule:exactly; line-height:13px;">
       <br>
    </span>
    Duis consectetur velit vel ipsum interdum anella onsequat lacus mattis.        
  </td>
 </tr>
</table>

Any thoughts would be greatly appreciated. This is wracking my brain. Thanks!

Answer 1

It is obvious that the font-size:22px is overriding the font-size:12px given in td. What you can do is that instead of span divide your td into two td's and let them have the different font-sizes' html emails get the font from the td and not span tags.

Answer 2

try adding min-width='600px' to the table, as some devices dont like widths in % (eg. Androids). Also, note the font-size=12px is applied to both the <span> as its applied to the <td>.

Answer 3

this did it for me:

@media (max-width: 600px) {
      * { -webkit-text-size-adjust:none; }
}