this is how it looks when rendered on live server
it is distorted when automated response is triggered and the template is being sent via postman
note:- 'The reason this is written in 'inline css' because gmail doesnt consider outline css, it renders the html in a plain form, it can only render inline css.' for those who are not aware. this is the code, sorry i am completely new to this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>message_generation</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet"
/>
</head>
<body
style="
font-size: 15px;
background-color: rgb(255, 255, 255);
font-family: 'Montserrat';
padding: 1%;
padding-bottom: 1%;
margin: 7px;
display: flex;
align-self: center;
align-items: center;
"
>
<div
class="outer"
style="
background-color: rgb(255, 238, 238);
height: 90%;
padding-top: 1%;
padding-bottom: 1%;
padding-left: 1%;
padding-right: 1%;
width: 100%;
"
>
<img
src="./crackle.png"
href="https://crackle.tech/"
alt=""
srcset=""
style="
height: auto;
width: 150px;
align-self: center;
padding-bottom: 20px;
padding-top: 8px;
padding-right: 8px;
display: flex;
align-items: center;
margin: auto;
align-self: center;
"
/>
<div
class="inner"
style="
font-size: 15px;
background-color: white;
font-family: 'Montserrat';
padding-bottom: 5%;
margin: auto;
border: 1px solid black;
display: flex;
flex-direction: column;
width: 100%;
align-self: center;
align-content: center;
flex: content;
"
>
<p style="padding-left: 2%; font-size: 12px">
Dear ${1}, <br />
Your bank account details <br />
have been updated to <br />
</p>
<br />
<div
class="contain"
style="
background-color: #e3e4e5;
display: flex;
justify-content: center;
min-width: 100%;
flex-direction: column;
height: 30%;
gap: 8px;
height: 30%;
padding-top: 13px;
padding-bottom: 8px;
align-self: center;
word-wrap: break-word;
padding: none;
margin-bottom: 15px;
"
>
<div
style="
display: grid;
grid-template-columns: auto 1fr;
gap: 8px;
align-items: center;
font-size: 13px;
white-space: wrap;
padding-left: 20px;
flex-wrap: wrap;
"
>
<p style="margin: 0; flex-direction: row">
Bank Name
:
</p>
<p style="margin: 0; flex-direction: row; font-weight: 600">${2}</p>
<br />
</div>
<div
style="
display: grid;
grid-template-columns: auto 1fr;
gap: 8px;
align-items: center;
font-size: 13px;
white-space: wrap;
padding-left: 20px;
"
>
<p style="margin: 0">
Acc. No
:
</p>
<p style="margin: 0; font-weight: 600">${3}</p>
<br />
</div>
<div
style="
display: grid;
grid-template-columns: auto 1fr;
gap: 8px;
align-items: center;
font-size: 13px;
white-space: wrap;
padding-left: 20px;
"
>
<p style="margin: 0">
IFSC
:
</p>
<p style="margin: 0; font-weight: 600">${4}</p>
</div>
<br />
<div
style="
display: grid;
grid-template-columns: auto 1fr;
gap: 8px;
align-items: center;
font-size: 13px;
white-space: wrap;
padding-left: 20px;
"
>
<p
style="
margin: 0;
size: 11px;
flex-wrap: wrap;
flex-wrap: break;
display: flex;
align-self: baseline;
"
>
Beneficiary Name :
</p>
<p
style="
margin: 0;
word-wrap: break-word;
font-weight: 600;
width: 80%;
overflow-wrap: break-word;
display: flex;
align-items: baseline;
"
>
${5}
</p>
</div>
<br />
</div>
<br />
<div class="regards" style="padding: 7px; font-size: 12px">
<p
style="
margin: 0;
white-space: nowrap;
padding-left: 1%;
padding-right: 3%;
"
>
If the account update was not initiated by <br />
you, please reach out at
<a
href="mailto:[email protected]"
style="padding-left: 3px; padding-right: 5px"
>[email protected]</a
>
<br />
<br />
Thank you, <br />
Crackle Team
<br />
<i style="font-size: 10px"
>This is a computer generated mail, please do not reply.</i
>
</p>
</div>
</div>
<p style="text-align: center; font-size: 10px">
You have received this mandatory service notification email <br />
because it contains important information about your Crackle account.
<br />
Crackle Technologies, 9 Raffles Place, #29-05, Republic Plaza, Singapore
048619
</p>
</div>
</body>
</html>
My guess was that it takes body as an output, and the 'outer' div is crammed inside body?
Email only accepts a subset of web technology. You can't use grid (https://www.caniemail.com/search/?s=grid) or flexbox (https://www.caniemail.com/search/?s=flex), for example. But you have no need to reinvent the wheel either, there are plenty of techniques out there. If you want a separate automated generator tool, there is not an 'answer' for that, but search for them.