CSS Elements Not Displaying Properly In Emails

I'm trying to create a service desk ticket template that will be distributed via email. By following a few guides online on how to create dynamic email templates that will look goo

Solution 1:

Judging from your images I would guess that the general box-sizing: border-box; property is ignored. So I would try to avoid to use bordersettings for the outer container (.box) and instead use padding: 20px (same as previous border thickness) and a background-color equal to the previous border-color on it to get a border-like effect. (and remove box-sizing: border-box;)

Solution 2:

Box-sizing is not supported by many email clients. I would consider alternatives.

• https://www.campaignmonitor.com/css/box-model/box-sizing/

Outlook has buggy support for padding and margin.

• https://www.campaignmonitor.com/css/box-model/padding/

Outlook doesn't really support <div>.

Outlook has some spotty support for in-document style sheets when it comes to width. Setting a hard value width="600" will generally work better than width="100%". You can still declare either in-line or in-document width: 100% !important; which most modern email clients like IOS will use, but Outlook tends to ignore.

Outlook Desktop ignores @media queries. In addition, so does Android. So you can specify specific css values that Gmail, IOS and other clients will use.

If you inline the background colors in the tables or use <table bgcolor="#ff0000"> Android and Outlook will pick up the colors.

In general, your template looks good. It just needs fine-tuning to work better.

Good luck.