HTML, CSS for mailing

Question

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

and

. So I have to convert it to table and spans.

Any suggestions on how to make the design look the same in most email clients with some code?

The current code is as follows

<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>

P粉268284930406 days ago606

Answer 1

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/