So i have a html code which works fine in new Outlook version but it does not render properly in outlook 365, i have attached two screenshots( one is the actual design– which works well in new version of outlook) and another is the actual result.
Can someone please help me out. I think there are many tags which the current outlook version does not support. But can we get anywhere closer to the actual design
Actual Design(works fine in new outlook version)
below is the code used!
<!DOCTYPE html>
<html><head>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@600;700;800&family=Inria+Sans:wght@700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
background-color: #f4f4f4;
box-sizing: border-box;
height : 100%;
width : 100%;
}
.table-container{
display : table;
width : 100%;
height: 100%;
}
.table-cell{
display: table-cell;
vertical-align: top;
text-align: center;
padding : 5% 0;
}
.container {
padding: 18px;
max-width: 100%;
width: 100%;
background: white;
border-radius: 10px;
border: 2px solid #000;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
box-sizing: border-box;
text-align: center;
position: relative;
}
.header {
background-color: #77cc00;
color: white;
padding: 15px;
font-size: 20px;
font-family: 'Inter', sans-serif;
font-weight: bold;
border-radius: 10px 10px 0 0;
border-bottom: 2px solid #000;
border-top: 2px solid #000;
border-left: 2px solid #000;
border-right: 2px solid #000;
position: relative;
z-index: 1;
}
.content {
padding: 20px;
background-color: #f9f9f9;
border-radius: 0 0 10px 10px;
border: 2px solid #77cc00;
border-top: none;
text-align: center;
margin-top: -2px;
position: relative;
}
.success-section {
padding: 10px;
padding-top:0px;
padding-bottom:0px;
background-color: #f0f0f0;
margin-bottom: 5px;
text-align: center;
border: 2px solid #000;
border-radius: 10px;
display: inline-block;
}
.icon {
margin: 0;
vertical-align: middle;
}
.success-text {
font-family: 'Inter', sans-serif;
font-weight: 800;
color: #77cc00;
font-size: 24px;
margin: 0; /* Remove margin to reduce gap */
/*display: inline-block;*/
/* vertical-align: middle;*/
}
/*.success-text {
font-family: 'Inter', sans-serif;
font-weight: 800;
color: #f44336;
font-size: 24px;
}*/
.message-box {
font-family: 'Inria Sans', sans-serif;
font-weight: bold;
color: #333;
background-color: #e0e0e0;
padding: 10%;
border-radius: 10px;
margin: 15px 0;
}
.message-text {
margin: 5px 0;
}
.icon {
margin: 6px 0;
}
.footer {
padding-top: 20px;
text-align: left;
font-size: 14px;
font-family: 'Inter', sans-serif;
font-weight: 600;
color: #333;
}
@media (max-width: 600px) {
.container {
margin: 10px;
border-radius: 5px;
}
.header {
font-size: 18px;
padding: 10px;
}
.content p {
font-size: 16px;
margin: 10px 0;
}
.icon {
margin: 15px 0;
}
.success-text {
font-size: 20px;
}
}
</style>
</head>
<body>
<div class="table-container">
<div class="table-cell">
</div>
</div>
<div class="container">
<div class="header">Extraction Status (Prod) -- {botName}</div>
<div class="content">
<div class="success-section">
<img class="icon" src="https://cdn-icons-png.flaticon.com/512/16104/16104958.png" alt="Success Icon" width="80">
<p class="success-text"><strong>SUCCESS</strong></p>
</div>
<div class="message-box">
<p class="message-text">The extraction has completed successfully with the following records</p>
<p class="message-text" style="font-style: italic;">{records_count}</p>
<p class="message-text">File has been successfully moved to workfiles/input</p>
</div>
<div class="footer">
Regards,<br>
OCS Team
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You need to sign in to view this answers
Leave feedback about this