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.

 
   
Retina image scaled down on iPhone 5SE

waterrf

Newbie
Total Posts:  9
Posted: 29 December 2016 08:47 AM

I followed the instructions in this post: https://www.emailonacid.com/blog/article/email-development/mobile-optimization-retina-images-in-email to provide a retina version of our organization logo.

It seems to be working okay, except is scaled extra small on my iPhone 5SE. (the iPhone 5S test shows the same thing: https://www.emailonacid.com/app/acidtest/display/result/HcKOEYuosJWdGSQIotdqp2djd9tHyYtes6diahSXSzkG0/88/shared)

Has anyone else seen this and is there anything in the attached code that I’m missing?

File Attachments
Webcasts2017.html  (File Size: 7KB - Downloads: 79)

 

Geoff Phillips

Avatar
Moderator
Total Posts:  386
Posted: 30 December 2016 02:38 AM
[ # 1 ]

waterrf,
Thanks for posting this question!

I see that you have the logo in a table row with three cells. Those cells are set to widths of 108, 435, and 107 for a total of 650px of width. The iPhone will try to make all of that fit on the screen, even though its screen has a smaller width. To do this, it “zooms out” the email, which is why your logo looks so small.

If you add some classes to these TDs, you should be able to include a media query and overwrite their width for smaller devices.

I hope that helps!


 

waterrf

Newbie
Total Posts:  9
Posted: 30 December 2016 03:02 AM
[ # 2 ]

Thanks Geoff, I had the single class making the whole wrapper scale, but didn’t think about scaling those columns individually as well.

Since I’m hiding the last column, can i ignore it when I’m calculating the mobile widths for the other two columns?