font-size email mobile is too small

C

5

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?

Certes answered 4/4, 2017 at 18:52 Comment(1)

15px is pretty big for a font size and it should show properly. I have a feeling your email is being resized on Gmail app. Is there any code that would force it to do that? Maybe an image that has a max and min width of the size of the template? – Veliger 4/4, 2017 at 23:25

P

6

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>).

Pinochle answered 18/11, 2019 at 5:19 Comment(1)

thank you! it was enough to add something like style="width:100%;height:auto;max-width:800px;" to ALL images (and let me stress ALL your images, even the ones that are small) – Nickelodeon 27/12, 2020 at 9:52

D

2

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">

Deboer answered 6/4, 2017 at 12:10 Comment(0)

B

0

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.

Berryman answered 4/4, 2017 at 18:56 Comment(0)

O

0

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.

Oversexed answered 27/9, 2021 at 0:29 Comment(0)

H

0

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.

Homicidal answered 12/9, 2023 at 5:41 Comment(0)

Recommended topics

Hot tags