JS6
Gmail App (Android): How to stop text from auto-resizing?
Gmail App (Android) is increasing the font size in my emails by %110. Does anyone have a solution for this?
JSJSGmail App (Android) is increasing the font size in my emails by %110. Does anyone have a solution for this?
GMAIL iOS APP FONT SIZING FIX:
http://freshinbox.com/blog/gmail-on-ios-increases-font-size-on-some-emails
The Gmail iOS app increases font sizes to make them more legible on mobile. It can however have very unpredictable results and break email templates or make them look worse. Using either of the two methods below leverages a email width check to prevent the font sizing behaviour occurring.
Method #1
Method #2
I tried to format this but I can't get it to look pretty.
Removed the comments, they sometimes screw up rendering code.
Thanks... looks better!
Is the font size actually increasing or is it zoomed in? Might be an issue with Gmail zooming into random parts of your email. Solution is to add
min-width: 999pxto a full-width cell of your email. Make the value equal to the full width of your email.This is what I was thinking too.
I've not been seeing any issues with font-size just zooming.
you just solved what i've been trying to do for weeks. Thank you!!
Hey Jenny, I have not found a specific fix the font size, but I have found that if you add "min-width" to your tables, it will help keep your layout in tact, and also keeps the font size proportionate. The downside is that if you have a 600px wide layout with let's say with a font size of 14px, it will reduce the font size the same proportions that it reduces the 600 px wide layout. It will fit the 600px wide layout to fit the screen, thus reducing the font size. This can make the font size pretty small.
Also, if you are using a 100% wide container table you do not have to add the min-width to that table, just the other nested tables.
Also also, I don't think the Gmail App (Android) uses the webkit engine. "-webkit-text-size-adjust" never seems to work in the Gmail App, not to be confused with the native Android Email App, which renders thinks very differently.
I hope this helps. It really helped me.
As an addendum, In some cases I have to add min-width to my table cells as well as the table itself. It looks like you can add it to the first row of TDs and that seems to take care of the whole table.
I use the webkit rule: -webkit-text-size-adjust: none;
and our font is above 14 px and it still happens.
wow this post is still active after two years. This is no longer an issue for me since we started coding our emails as hybrids (if someone is looking for another solution :)
Thank you Jenny :)
try this mate
Where should this line of html code be added..?
Can I add this to the top most table ...? Or where else .. ? Please guide me..
Jenny - I am having the same issue and have not found a solution either... :-/
Hi Robert and Jenny, I was able to solve my issue with random zooming by setting a min-width on an image that has the same width as the container table. I found the fix while digging through the following email boilerplate: https://raw.githubusercontent.com/centralcollegenottingham/html-email-boilerplate-redux/master/htmlemail-boilerplate-stable-with-guidelines.html. Look for the 'PREVENT GMAIL APP AUTO-FIT/ZOOMING:' section.
wow this boilerplate is extensive thanks for sharing!
I've never come across this problem. I always assign every single element a font-size and line height no matter what.
Ok I have found some sort of solution for that, if you don't use resize text by responsive design, you can just simply add:
style="font-size: 12px; font-size: 12px !important"
This will stop GMaill app on iOS for text resize, but it's not enough, he will not resize text, but will resize line-height property, so need to add:
style="font-size: 12px; font-size: 12px !important; line-height: 16px; line-height: 16px !important"
This will stop GMail app on iOS from resizing anything, and it will look as you want.
Important note is that there is no possibility to change this font size/line height using media queries, but for me it's cool sometimes to use it.
Thank You Grzegorz you saved my life:)
I think if you do:
<p style="font-size:12px; font-size:12px !important;" id="resize_me" class="resizable"><span>hello resize!</span></p>and either:
@media { p#resize_me { font-size: 15px !important; }or
@media { p.resizable span { font-size:15px !important; }you should achieve nearer specificity with those. Gmail seems to be up-in-the air right now... so who knows.
Adding a min-width declaration worked for me as well. Interestingly enough, it also modified all the text in the email. Not only the <td> to which I added the style.
Email clients using webkit (iPhone & Android) adjust font sizes to increase readability.
You can disable this by using this CSS Rule: -webkit-text-size-adjust: none;
Or you can make your fonts at least 14px or above.
Voilà!
I don't know why were you downvoted but you're right.
That property helps fix the issue where the email client zooms the font. It fixed it for me on the Gmail App and iOS email client.
Since the Gmail App (Android) isn't a webkit client this won't work.
Thanks for all the feedback, Yes it is zooming in, seems like 110%-120% across the board. Unfortunately none of the suggestions seem to be working for me.
I see a similar discussion on campaign monitor (https://www.campaignmonitor.com/forums/post/29155/#p29155) and the same min-with solution offered here which I wish worked for me.
Hi Jenny,
If you can send your code I can do some testing.
Otherwise try this, it should stop the text from changing in size:
You could also try targeting your text specifically, if it is Heading 1 and 2 for example:
Otherwise, inline it like this:
Thanks,
Lee.
Hi Lee, I tried it but still not working, any other idea? I'm driving mad about it..
Hi,
When I test using my own coded template it seems to look fine.
Can you please paste in your email code and I can take a look at it.
Thanks,
Lee.
Thank you for your reply Lee! Pasted below:
<table cellspacing="0" cellpadding="0" border="0" style="color:#38383d;" class="new_products fontcolors" id="new_products_25"><tbody><tr class="item_299 item" style="background:#fff !important;float: left;width:193px;height:273px;margin:10px;display:flex;flex-wrap:wrap;display:grid;">
<td width="193px" valign="top" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;height:150px;float:left;">
<a target="_blank" class="msgLink" href="http://www.ownergroup.net/store/product/299/implante-dental" style="display: block; color: rgb(157, 163, 169);">
<span style="background-image:url(https://d3fl5gs8u3b5cy.cloudfront.net/public/store_photo/2f/1e/1e11_40f2.jpg?c=7214);background-size:cover;background-repeat:no-repeat;background-position:center;height:150px;width:193px;display:block"></span>
</a>
</td>
<td valign="top" style="font-size:16px;line-height:1.2;letter-spacing:1.2px;font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;padding:10px;word-break:break-all;float:left;">
<div style="color:#9da3a9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:173px;">
<a target="_blank" class="msgLink" href="http://www.ownergroup.net/store/product/299/implante-dental" style="font-weight: 500;text-decoration:none; color:#9da3a9">
IMPLANTE DENTAL </a>
</div>
<div>
<b>
<span>OGV 1.388,00</span>
</b>
</div>
<div style="margin-top:5px;height:58px;max-height:58px;overflow:hidden;">
¿Qué es?
Es una prótesis hecha de titanio que se inserta en el hueso de la m... </div>
</td>
</tr>
<tr class="item_298 item" style="background:#fff !important;float: left;width:193px;height:273px;margin:10px;display:flex;flex-wrap:wrap;display:grid;">
<td width="193px" valign="top" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;height:150px;float:left;">
<a target="_blank" class="msgLink" href="http://www.ownergroup.net/store/product/298/consultoria-symphony" style="display: block; color: rgb(157, 163, 169);">
<span style="background-image:url(https://d3fl5gs8u3b5cy.cloudfront.net/public/store_photo/a8/1d/1d8b_d4d4.jpg?c=7961);background-size:cover;background-repeat:no-repeat;background-position:center;height:150px;width:193px;display:block"></span>
</a>
</td>
<td valign="top" style="font-size:16px;line-height:1.2;letter-spacing:1.2px;font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;padding:10px;word-break:break-all;float:left;">
<div style="color:#9da3a9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:173px;">
<a target="_blank" class="msgLink" href="http://www.ownergroup.net/store/product/298/consultoria-symphony" style="font-weight: 500;text-decoration:none; color:#9da3a9">
Consultoria Symphony </a>
</div>
<div>
<b>
<span>OGV 1,00</span>
</b>
</div>
<div style="margin-top:5px;height:58px;max-height:58px;overflow:hidden;">
Consultoría Robotics Process Automation• Proyectos de Visión&bu... </div>
</td>
</tr>
<tr class="item_297 item" style="background:#fff !important;float: left;width:193px;height:273px;margin:10px;display:flex;flex-wrap:wrap;display:grid;">
<td width="193px" valign="top" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;height:150px;float:left;">
<a target="_blank" class="msgLink" href="http://www.ownergroup.net/store/product/297/fin-del-mundo-con-expedicion-crucero-australis" style="display: block; color: rgb(157, 163, 169);">
<span style="background-image:url(https://d3fl5gs8u3b5cy.cloudfront.net/public/store_photo/87/1d/1d6a_6f8a.jpg?c=0ae6);background-size:cover;background-repeat:no-repeat;background-position:center;height:150px;width:193px;display:block"></span>
</a>
</td>
<td valign="top" style="font-size:16px;line-height:1.2;letter-spacing:1.2px;font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;padding:10px;word-break:break-all;float:left;">
<div style="color:#9da3a9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:173px;">
<a target="_blank" class="msgLink" href="http://www.ownergroup.net/store/product/297/fin-del-mundo-con-expedicion-crucero-australis" style="font-weight: 500;text-decoration:none; color:#9da3a9">
FIN DEL MUNDO CON EXPEDICIÓN CRUCERO AUSTRALIS </a>
</div>
<div>
<b>
<span>OGV 3.816,00</span>
</b>
</div>
<div style="margin-top:5px;height:58px;max-height:58px;overflow:hidden;">
Ranking 15
11 NOCHES/SALIDAS OCT-MAR
Buenos Aires - Ushuaia - Crucero de Expedición Aus... </div>
</td>
</tr>
</tbody></table>
Hi,
Thanks for the code, can you please copy/paste the full html email including the header with the css. Basically the whole email template.
Also, when you paste it here, make sure you wrap the code with the code tag so it appears in coding format.
See here example of how it should look:
https://minimalco.de/code.txt
Thanks,
Lee.
Hi Lee, thank you!
Yes, I tried using "code" tags but no luck, maybe I passed something over. The code is quite long and I don't wish to bother this thread with bunch of code, have any email for this purpose?
Hi,
As well as the html, I would also need to see the header and css to work on this.
Thanks,
Lee.
Deso anyone has a fix on this?
I've tried using em, !important, and the "------" fix, but none of those seem to work :(
Hi @felipe victoria, have you found anything yet? Need to find a fix urgently
I don't know about you, but literally, I found so many ideas from here and solve my maximum number of issues. If you need help in D-Link Router and especially in D-Link Router Error 103 please visit our website http://www.routercustomercare.co/blog/how-to-fix-d-link-router-errors-103/ and find the perfect solution to it.