I'm currently working on crafting a service desk ticket template to be disseminated via email. After consulting various online resources regarding the creation of dynamic email templates that will maintain a consistent appearance across different devices and email platforms, I've managed to achieve this outcome: https://i.sstatic.net/ACQR7.png
However, once the email is sent out, it transforms into a rather unattractive layout, seemingly disregarding the use of percentages for width (resulting in the loss of padding on the right side): https://i.sstatic.net/pUjEt.png
This issue persists across Outlook, Gmail, and iOS's Mail client. It appears that something is being overlooked or rendered ineffective within my header tag when it comes to emails, but pinpointing the exact problem has proven challenging. Any insights or solutions to address this breakdown would be greatly appreciated.
Edit: I should note that I also attempted utilizing Mailchimp's CSS inliner tool, yet the result remained identical. I even experimented with employing style="display: block;" for the img styles, only to find that it did not resolve the issue. Subsequently, I opted to remove the company image from the header of the ticket... to no avail.
Attached snippet:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {
box-sizing: border-box;
}
img {
display: block;
}
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
font-size: 45px;
background-color: #bbbcbc;
width: 75%;
color: #000000;
padding: 15px;
}
.box {
width:75%;
border: 20px solid #bbbcbc;
margin: 0;
}
.case-number {
font-size: 20px;
background-color: #535659;
color: white;
width: 100%;
padding: 10px;
}
.date-opened {
font-size: 20px;
background-color: #bbbcbc;
color: #000000;
width: 100%;
padding: 10px;
}
.body {
font-size: 20px;
background-color: white;
color: black;
width: 100%;
padding: 15px;
}
.ttable th {
width: 20%;
text-align: left;
background-color: #bbbcbc;
border: 1px solid #bbbcbc;
padding: 5px;
margin:0;
}
.ttable td {
width: 60%;
border: 1px solid #bbbcbc;
padding: 5px;
margin:0;
}
.footer {
width: 100%;
background-color: #bbbcbc;
color: black;
text-align: center;
padding-top: 20px;
}
</style>
</head>
<body>
<div class="header">
<img src="" style="display: block;"/>
</div>
<div class="box">
<div class="case-number">Case Number: 123456</div>
<div class="date-opened">Date Opened: 14 June 2018 at 12:00 PM</div>
<div class="body">
You are receiving this email because your case has been updated. Your case details and any updates can be found below this message.
<br></br>
If you wish to post a comment to the case you can simply reply to this email and your case will be updated.
If you would like to include a screenshot or relevant log files you can do so by including them in your reply.
<br></br>
[progress bar goes here]
<br></br>
In order to proceed with your case we will need additional information or clarification on the reported issue.
Please provide the requested information within the next 4 days.
If no response is received during this time we will temporarily archive your case.
Once you are ready to continue with simply reply to one of the case emails.
<br></br>
<div class="ttable">
<table>
<tr>
<th>Subject</th>
<td>TICKET SUBJECT HERE</td>
</tr><tr>
<th>Description</th>
<td>TICKET DESCRIPTION HERE</td>
</tr>
</table>
</div>
</div>
<div class="footer">
</div>
</div>
</body>
</html>