I'm using the following email template (I chose the basic one) from zurb
http://zurb.com/playground/responsive-email-templates http://zurb.com/playground/projects/responsive-email-templates/basic.html
which includes the following media query:
@media only screen and (max-width: 600px) {
a[class="btn"] { display:block!important; margin-bottom:10px!important; background-image:none!important; margin-right:0!important;}
div[class="column"] { width: auto!important; float:none!important;}
table.social div[class="column"] {
width:auto!important;
}
}
the font on the phone looks really small specifically the text inside the table cells is so tiny
How to override the font on the phone?
Perhaps the best thing you could do is go through the file and change all font-sizes from px to em. However, 1em is equal to 12px, so you will have to do some math to get the numbers right. Then, you can add a style to the
body {font-size: 120%;}
and that will change the font size to 120% of what it would normally be. You can change it to any percentage that you like and it will change all of the fonts based on the em value you gave each element. Then, if you want to change all of the font sizes at once, you just change that percentage...then you don't lose you proportions. You can also leave the desktop the same by adding font-size:100% to the body element. Then, in the media query, you can set the body font-size to something like 120%.