I'm working on some newsletters for my company and we're dealing with some issues with different email clients, eg. Gmail, Outlook online, Outlook in app, mobile versions of these customers.
Each of these texts looks different. The problem is also that the Outlook application incorrectly supports Any suggestions on how to make the design look the same in most email clients with some code? The current code is as follows
. So I have to convert it to
table
and spans
.
<div style="background-color: white; margin-right: 9px; margin-left: 9px; padding-bottom:1px; margin-bottom:10px;">
<table style="background-color: white; border-color: black;padding-bottom:1px; margin-bottom:10px;">
<tbody>
<tr>
<td>
<h3 style="color: #000000; font-family: 'Open Sans', Verdana, Arial, sans-serif; font-size: 16px; font-style: normal; line-height: 24px; letter-spacing: normal; text-align: left; display: inline-block;"> Hello, </h3>
<br />
<span style="font-family: 'Open Sans', Verdana, Arial, sans-serif; font-size: 13px; line-height: 18px; font-style: normal; font-weight: normal; color: #787878;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla turpis magna<br /> cursus sit amet, suscipit a, interdum id, felis. Ut tempus purus at lorem. <br /> Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. <a href="https://blog.inpage.cz/obrazek/2/kitten-jpg/">here</a>.<br /> <br /> Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus</span>
</td>
</tr>
<tr>
<td><img style="text-align: left; width: 275px; height: 105px; margin: 10px; border-width: 0px; border-style: solid; float: left;" src="https://blog.inpage.cz/obrazek/2/kitten-jpg/" alt="CAD" /></td>
</tr>
<tr>
<td>
<h2 style="color: #f26503; font-family: 'Open Sans', Verdana, Arial, sans-serif; font-size: 24px; line-height: 36px; text-align: center;"><u>here, lorem</u></h2>
</td>
</tr>
</tbody>
</table>
</div>
<span style="line-height: 0.1; padding:1px; margin:10px;">
</span>
Unfortunately, email providers do not support most elements in html and css. I know there is reliable documentation that can help you on this topic. You can browse to find supported elements and CSS and change your template accordingly.
https://elasticemail.com/supported-css
https://www.campaignmonitor.com/css/selectors/class/一个>