I am encountering an issue while using Handlebars JS in my Nest JS project to send emails. Although the email is sending properly, the content of the email body is not rendering correctly, resulting in responsiveness and styling problems.
In my template:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" style="font-family:arial, 'helvetica neue', helvetica, sans-serif">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My title</title>
<style type="text/css">
@import url("https://fonts.googleapis.com/css2?family=Anek+Bangla:[email protected]&family=Noto+Serif+Bengali:[email protected]&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Anek Bangla", sans-serif;
margin: 0 auto;
color: #3e3e3e;
background-color: #f4f4f4;
}
@media screen and (max-width: 600px) {.template {padding: 2.5rem 1.5rem;} button {width: 100%;}}
</style>
</head>
<body>
............................ Continue code here
Seeking assistance on how to achieve the actual view of my template within the email. Thank you in advance.