CODEWITHSUNDEEP
htmlcsshtml-email
Jenny
Jenny

Reputation: 919

font-size email mobile is too small

I set the font to 15px but when viewing the email on a mobile device (specifically mail > gmail) the text appears much smaller. How do I increase the size for mobile without increasing the size for desktop, I hear gmail strips media queries.

<table>
<tr>
<td style="font-size: 15px;"><p style="font-size: 15px;">Some text</p></td>
</tr>
</table>

Any ideas?

Upvotes: 5

Views: 15057

Answers (5)

Fortunate Lucy
Fortunate Lucy

Reputation: 1

I faced the same issue some time ago. I used the @media screen to resolve my issue at starting but changing to other resolutions its not working for the other resolutions except for the mentioned width or height . Then after I used % in place of px .It worked for me to all the other Resolutions also. so try replace ,

style="font-size: 15px;"

to

style="font-size: 20%;" // your choice you can mention the number according to your request. Here % will change the font size according to the screen Resolution and screen Size.

Upvotes: 0

Philip Sole
Philip Sole

Reputation: 58

I had the same issue. For me, changing container CSS from:

width: 600px;
max-width: 100%;

To:

width: 100%;
max-width: 600px;

Solved the issue.

Upvotes: 0

Nathan
Nathan

Reputation: 5259

Most likely what is happening is that Gmail is picking up on an image or other element that is not responsive (e.g. set to width="600", but not with the additional responsive code, style="width:100%;height:auto;max-width:600px;").

In this case, you need to fix up the unresponsive elements, and then Gmail won't feel the need to resize your text.

Gmail will now accept media queries, so you can setup the following in the <head> section:

<style type="text/css">    
@media screen and (max-width: 620px) {
    ...
    }
</style>

Having said that, Gmail behaves differently if you are not using their native email, but your own domain (the term: GANGA). The key here is that customers with these types of Gmail emails will have the @media query stripped (and all embedded CSS).

Also Gmail will strip out the entire <style>...</style> section if you have invalid code in there, or code it doesn't accept such as the attribute selector, e.g. img[class="header"] (from Email on Acid)

Nevertheless even for GANGA type Gmail users it is certainly possible to render perfectly legible text (i.e. have responsive emails). Use the 'hybrid' method if you have complex 2 or 3 column emails - otherwise, check your images, or really long URLs (break up URLs with <wbr>).

Upvotes: 6

Ted Goas
Ted Goas

Reputation: 7587

You can change the font-size on mobile using a media-query like you would on the web. Many mobile clients support media queries now, including most of gmail.

.mobile-p {
  font-size: 18px !important; /* override inline style */
}
<table>
  <tr>
    <td>
      <p style="font-size: 15px;" class="mobile-p">Some text</p>
    </td>
  </tr>
</table>

Additionally iOS Mail sometimes auto-formats text. Disable auto-scale in iOS 10 Mail entirely using this <meta> tag in the <head>:

<meta name="x-apple-disable-message-reformatting">

Upvotes: 2

Kenneth Hutchison
Kenneth Hutchison

Reputation: 11

The simplest thing I can think of would be to use viewport units. Namely these:

vw: 1/100th viewport width vh: 1/100th viewport height vmin: 1/100th of the smallest side vmax: 1/100th of the largest side

Set your font-size attribute to some scalar*vmax for instance and adjust from there.

Upvotes: 0

Related Questions