For mail app which present on windows html we can do but sometimes the CSS properties doesn’t take their . At that time we can use inline styles and have to give every styles directly.
On Windows computers, there’s a global setting that people can change (or in some cases, are set higher by default) that scales up the text and graphical elements to make them larger and easier to read. This is great for accessibility, but not so great for Outlook (some elements are scaled up while others aren’t).
Luckily, there’s a fix. First, you have to add an XML namespace to the HTML tag:
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">
Then, add some code to fix for image scaling right before the </head> tag:
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
Finally, make sure to include any set widths as CSS properties with pixels and not as an attribute on your tables.
✗ Not this with width=”600″:
<table cellpadding="0" cellspacing="0" border="0" role="presentation" width="600">
✔ Yes, like this with style=”width:600px;”:
<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:600px;">Sometimes it happens that even if we put styles , it’s not working in mail app. Then we have to give styles individually .
For eg: style=” vertical-align: middle; width: 30px; ->Don’t give like this
Give like individual : height=”30″; width=”30″; seperate.