HTML Email - Font Resizing on Gmail App for Mobiles

Refresh

April 2019

Views

371 time

1

I have an issue with an HTML Email I've developed for a client. They're all using Gmail on Android phones to test and preview what's being sent and also GSuite. The problem I'm having (font being shrunk) is happening in both, but not in my Litmus tests, just when they preview it through iContact for Salesforce.

So where I've declared larger headings it's showing as about font-size 12 pixels (I'm judging that by eye based on their screenshots)... not the 26 pixels it's set to be. The other text blocks are fine, however, and show at the correct size (16 pixels). Example:

    <tr>
     <td class="container-padding" align="left" style="padding-left: 40px; 
     padding-right: 40px;">
        <span class="medium-text" style="color: #333333; font-size: 16px; 
        line-height: 24px; display: block; font-family: 'Calibri', 
        Helvetica, Arial, sans-serif; text-align: left; font-weight: 
        normal;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Aliquam maximus felis ex, eu auctor lectus pellentesque finibus. 
        Integer vel interdum felis.</span>
    </td>
    </tr>

I suppose my question is, is the issue that Gmail is forcing my font-size: 26px to be font-size: 12px. There's another example where the main email heading is even larger - 32 pixels - and that's also being shrunk.

HTML below.

    <tr>
    <td class="container-padding" align="left" style="padding-left: 40px; 
    padding-right: 40px;">
        <span class="large-text" style="color: #333333; font-size: 26px; 
        line-height: 32px; display: block; font-family: 'Calibri', 
        Helvetica, Arial, sans-serif; text-align: left; font-weight 
        normal;">I'm a Title that's been shrunk!</span>
    </td>
    </tr>

0 answers