CODEWITHSUNDEEP
cssmobilehtml-emailresponsive-emails
Robert Guice
Robert Guice

Reputation: 659

Font size issue with mobile emails

I'm using Python/Flask and mandrill smtp to send out email confirmations when users share. I'm having an issue with the font-size for mobile being super small.

My solution is this:

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="x-apple-disable-message-reformatting">
    <style type="text/css">
        .bodyContent p {font-size: 18px; line-height: 140%;}
        footer {font-size: 14px; }
        footer img { width: 30px;}
        @media (max-width: 480px) {
            .bodyContent p {font-size:28px !important;}
            .bodyContent .button {font-size: 34px !important; padding: 10px !important;}
            footer {font-size: 22px !important; }
            footer img { width: 50px !important;}
            .headerimg {height: 80px !important;}
            h3 {font-size: 32px !important;}
        }
    </style>
  </head>
</html>

The body is:

<body class="bodyContent" style="border-top: 5px solid #248F8D; color: #444; font-weight: 300; font-family: Helvetica, Arial, Tahoma, sans-serif; background-color: white; margin: 0; padding: 0; width: 100%; box-sizing: border-box; line-height: 140%;">

I'm not sure why this happened though because with other emails, I left it simple with a standard font size of 16px or 18px in the body and it worked fine for web and mobile.

The above configuration works for iOS email, iMail and web based Gmail (I need to test the app as well) but something just doesn't feel right. 28px font-size for Helvetica on mobile seems excessively large doesn't it? I assume this is taking retina display into account but I'm not sure how this will work for other mobile devices. The viewport and x-apple-disable-message-reformatting doesn't seem to do anything.

If it helps, here is the RAW header for the email:

--_av-yV8UIgMjFFR4szq7ryfvsQ
    Content-Type: text/html; charset=utf-8
    Content-Transfer-Encoding: quoted-printable

    <html>
        <head>
            <meta name=3D"viewport" content=3D"width=3Ddevice-width, initial-sc=
    ale=3D1.0" />
            <meta name=3D"x-apple-disable-message-reformatting">
            <style type=3D"text/css">
                .bodyContent p {font-size: 18px; line-height: 140%;}
                footer {font-size: 14px; }
                footer img { width: 30px;}
                @media (max-width: 480px) {
                    .bodyContent p {font-size:28px !important;}
                    .bodyContent .button {font-size: 34px !important; padding: =
    10px !important;}
                    footer {font-size: 22px !important; }
                    footer img { width: 50px !important;}
                    .headerimg {height: 80px !important;}
                    h3 {font-size: 32px !important;}
                }
            </style>
        </head>
    </html>
    <body class=3D"bodyContent" style=3D"border-top: 5px solid #248F8D; color: =
    #444; font-weight: 300; font-family: Helvetica, Arial, Tahoma, sans-serif; =
    background-color: white; margin: 0; padding: 0; width: 100%; box-sizing: bo=
    rder-box; line-height: 140%;">
        <a href=3D"https://mandrillapp.com/track/click/30890999/www.givingdocs.=
    com?p=3DeyJzIjoiRHd1ME9vX3Fnd0V5Y2o5eUdrLWtpUV9ISkhNIiwidiI6MSwicCI6IntcInV=
    cIjozMDg5MDk5OSxcInZcIjoxLFwidXJsXCI6XCJodHRwczpcXFwvXFxcL3d3dy5naXZpbmdkb2=
    NzLmNvbVxcXC9cIixcImlkXCI6XCJmYTI5MzJjM2VlN2Q0MTRkYTU0OWE5MmE4ZmJmZGFiM1wiL=
    FwidXJsX2lkc1wiOltcIjNkNzRkZWM1NzNjMGI2ZGQ3N2Q1YTk2MjM4MjRkMDU3N2ExZTYwMzlc=
    Il19In0" style=3D"display: block; text-align: center;">
            <img src=3D"https://www.givingdocs.com/static/images/GD-logo-transp=
    arent.png" alt=3D"Giving Docs Estate Planning Platform" class=3D"headerimg"=
     style=3D"height:40px; margin: 15px auto 0;">
        </a>
        <div style=3D"max-width: 600px; margin: 0 auto;">


            <div style=3D"padding: 15px; background-color: white; max-width: 60=
    0px; margin: auto;">
                <p>
                    <span style=3D"background: teal; color: white; padding: 5px=
     10px;">Exclusive Invitation</span>
                </p>
                <p style=3D"margin: 20px 0; font-size: 18px;">
                    John Doe just created a will on Giving Docs and has invited=
     you to the same special offer:  <strong>Create your Will for free</strong>=
     or receive a deep discount on the complete estate package.
                </p>

                <p style=3D"text-align: center;">
                    <a href=3D"https://mandrillapp.com/track/click/30890999/www=
    .givingdocs.com?p=3DeyJzIjoibzBTZ1NCZ0RXUkZ3ZUM1NWlPRlBFM0U4a2xNIiwidiI6MSw=
    icCI6IntcInVcIjozMDg5MDk5OSxcInZcIjoxLFwidXJsXCI6XCJodHRwOlxcXC9cXFwvd3d3Lm=
    dpdmluZ2RvY3MuY29tXFxcL2FjY291bnRcXFwvYWN0aXZhdGVcXFwvTVRBeU9UUS5Cem5YVTUwZ=
    HNiaWx1Y01xSWpORnNEN2s5SDBcIixcImlkXCI6XCJmYTI5MzJjM2VlN2Q0MTRkYTU0OWE5MmE4=
    ZmJmZGFiM1wiLFwidXJsX2lkc1wiOltcIjNmOGM0NDk3MGUyZTc5YzI4MDllMDNlOThiZTJkNTg=
    zYWIwMWVmZjlcIl19In0" class=3D"button" style=3D"display: block; text-align:=
     center; padding: 7px 21px; background-color: teal; color:white; font-weigh=
    t: bold; font-size: 24px; border: 1px solid black; text-decoration: none; b=
    order-radius: 4px;">
                        Get Started
                    </a>
                </p>

                <h3 style=3D"font-weight: 300;">What's Giving Docs?</h3>
                <p>
                    After intense development and testing, Giving Docs has buil=
    t a pain-free way to create and manage your life's purpose through your est=
    ate plan.
                </p>
                <img src=3D"https://www.givingdocs.com/static/images/your-will2=
    .png" style=3D"width: 100%; height: auto; margin: 0 -15px;">
                <p>
                    <a href=3D"https://mandrillapp.com/track/click/30890999/www=
    .givingdocs.com?p=3DeyJzIjoiRHd1ME9vX3Fnd0V5Y2o5eUdrLWtpUV9ISkhNIiwidiI6MSw=
    icCI6IntcInVcIjozMDg5MDk5OSxcInZcIjoxLFwidXJsXCI6XCJodHRwczpcXFwvXFxcL3d3dy=
    5naXZpbmdkb2NzLmNvbVxcXC9cIixcImlkXCI6XCJmYTI5MzJjM2VlN2Q0MTRkYTU0OWE5MmE4Z=
    mJmZGFiM1wiLFwidXJsX2lkc1wiOltcIjNkNzRkZWM1NzNjMGI2ZGQ3N2Q1YTk2MjM4MjRkMDU3=
    N2ExZTYwMzlcIl19In0" class=3D"button" style=3D"display: block; text-align: =
    center; font-weight: bold; font-size: 22px;  padding: 7px 21px; background-=
    color: white; color: #444; border: 1px solid #666; text-decoration: none; b=
    order-radius: 4px;">
                        Learn more about Giving Docs
                    </a>
                </p>
                <p>
                    Giving Docs normal price is $195 (individual) - $295 (marri=
    ed couple) for the complete package.  With the offer from John Doe,  it's d=
    iscounted to $49 / $79.
                </p>
            </div>
        </div>
        <footer style=3D"padding: 15px; background: #f5f5f5; color: #666;">
                <div style=3D"text-align: center;">
                    <p>
                        Connect with us:
                    </p>
                    <p>
                        <img src=3D"https://www.givingdocs.com/static/images/em=
    ail/twitter.png" style=3D"margin-right: 10px;">
                        <img src=3D"https://www.givingdocs.com/static/images/em=
    ail/facebook.png">
                    </p>
                    <div style=3D"margin: 30px auto 15px; border-bottom: 1px so=
    lid #ccc; height: 1px; width: 600px;"></div>
                    <p>
                        Sent by <a href=3D"https://mandrillapp.com/track/click/=
    30890999/www.givingdocs.com?p=3DeyJzIjoiQ2VZRHZSRFFUOUg1c2c3RmVRSnQycF9KX25=
    JIiwidiI6MSwicCI6IntcInVcIjozMDg5MDk5OSxcInZcIjoxLFwidXJsXCI6XCJodHRwczpcXF=
    wvXFxcL3d3dy5naXZpbmdkb2NzLmNvbVwiLFwiaWRcIjpcImZhMjkzMmMzZWU3ZDQxNGRhNTQ5Y=
    TkyYThmYmZkYWIzXCIsXCJ1cmxfaWRzXCI6W1wiM2Q3NGRlYzU3M2MwYjZkZDc3ZDVhOTYyMzgy=
    NGQwNTc3YTFlNjAzOVwiXX0ifQ" style=3D"color: #444;">Giving Docs</a> =C2=B7 7=
    01 Brazos St, Austin, TX 78701
                    </p>
                </div>
        </footer>

    <img src=3D"https://mandrillapp.com/track/open.php?u=3D30890999&id=3Dfa2932=
    c3ee7d414da549a92a8fbfdab3" height=3D"1" width=3D"1"></body>

--_av-yV8UIgMjFFR4szq7ryfvsQ--

Thanks for any assistance with this!

Upvotes: 0

Views: 1006

Answers (0)

Related Questions