I have a node server that is sending emails templates.
When I'm opening that template locally it runs the CSS styles as properly at is should.
When I'm sending this as an a email to myself for testing some CSS doesn't apply.
CSS being received from a test email:
mainCon {
width: 936px;
background-color: #e9e9e9;
display: flex;
font-size: 24px;
border-radius: 0px 0px 20px 20px;
}
Original full CSS:
mainCon {
width: 936px;
height: max-content;
background-color: #E9E9E9;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 24px;
border-radius: 0px 0px 20px 20px;
}
Server (nodemailer):
const mailOptions = {
from: "email@yahoo.com",
to: "email@yahoo.com",
subject: `sub`,
template:'index',
context: {
fullName: req.body.fullName,
reason: req.body.reason,
problem: req.body.problem,
}
}
The CSS is inside the handlebars style component attached to the head
handlebars html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="mainCon">
<p class="title">title</p>
<div class="nameNreasonCon">
<div class="reasonCon">
<p>{{reason}}</p>
</div>
<div class="nameCon">
<p>{{fullName}}</p>
</div>
</div>
<div class="problemCon">
<p>{{problem}}</p>
</div>
</div>
</body>
</html>