Community Forum

Over the years we have built up a community of email marketers, coders and designers that live and breathe email.

Use the Email on Acid Forum like your virtual water cooler: Stop by to discuss email code, quirky clients and fixes and post your issues (with an example of the code) for our community to offer its assistance.

 
   
Optimizing Text Size for iPhone 7

neilparekh

Newbie
Total Posts:  2
Posted: 20 February 2017 12:48 PM

I’m sending a high visibility email out on behalf of our CEO tomorrow morning. I’m paying more attention to deliverability on this email than usual. Signed up for Email on Acid for this project last week and plan on sticking with it.

I have a 600px wide image and a 600 wide div tag. The iPhone 7 display is what I was trying to optimize. The font size wasn’t large enough to read comfortably.

I thought media queries, etc. would help. My best solution was just to set the font size at Arial 16.

Here are three samples of html for the emails. The filenames below correspond to tests in my Email on Acid Account. Links to the test results are in the text files.

“[Sample] 5. EOA Responsive Test” is a modified version of the Seashell Template.
“[Sample] 5. Original Size 3” uses a media query but sets the font size to ‘3’ from my ESP (Blue State Digital).
“[Sample] Starting a Conversation with you….” uses a media query but doesn’t set the font size.

Any suggestions?

Thanks,

Neil

File Attachments
Modified Seashell Template, Font Size 16.txt  (File Size: 12KB - Downloads: 105)
No Media Query, font size 3.txt  (File Size: 9KB - Downloads: 151)
With a Media Query.txt  (File Size: 9KB - Downloads: 143)

 

Alex Ilhan

Avatar
Administrator
Total Posts:  226
Posted: 23 February 2017 03:43 AM
[ # 1 ]

Hi neilparekh,

Welcome to the Email on Acid forums.

Just to clarify, you want to send out this email with the font enlarging on Mobile?

Cheers,
Alex


 

neilparekh

Newbie
Total Posts:  2
Posted: 23 February 2017 03:45 AM
[ # 2 ]

Yes.


 

Alex Ilhan

Avatar
Administrator
Total Posts:  226
Posted: 23 February 2017 04:07 AM
[ # 3 ]

Hi Neil,

Awesome - thanks.

I’ll be back shortly on this thread with a solution for you.

Cheers,
Alex


 

Alex Ilhan

Avatar
Administrator
Total Posts:  226
Posted: 23 February 2017 05:27 AM
[ # 4 ]

Hey neilparekh,

After reading your code I’ve found a fairly simple way for you to achieve this.

First of all, We need to move your media query into the head of the email. Below where you have your current

<head
  and before your
<body

we’re going to add in the code below;

<head>
    <
style type="text/css">
@
media only screen and (max-width480px){
    
.bodyContent{font-size:16px !important;}

  }                            
  
</style>
</
head

Then, all you need to do is add

class="bodyContent" 
to any
<font

you want to bump up on mobile.

I hope that all makes sense, let me know how you get on.

Cheers.
Alex