LinkedIn
Twitter
Hey all, I wanted to use HTML to create a nice looking body template using HTML
here is what I got
<body style="margin: 0; padding: 0; width: 100%; font-family: 'Roboto', sans-serif; color: #333;">
<div style="width: 100%; max-width: 600px; margin: 0 auto; padding: 20px; background-color: #ffffff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
<div style="text-align: left; padding-bottom: 10px;">
<h1 style="font-size: 22px; color: #333; margin: 0;">You Have a New Mention!</h1>
</div>
<div style="font-size: 16px; text-align: left; margin-bottom: 15px;">
<p style="margin: 0; color: #6c757d;">You've been mentioned in a comment on the following project:</p>
</div>
<div style="font-size: 14px; color: #555; margin-top: 5px; text-align: left;">
<p style="margin: 5px 0;"><strong>Project:</strong> <<[Project].[Project Title]>> </p>
<p style="margin: 5px 0;"><strong>Timestamp:</strong> <<[Comment Timestamp]>> </p>
</div>
<div style="font-size: 18px; font-weight: bold; background-color: #e6f7ff; color: #0056b3; padding: 15px; border-radius: 5px; margin-top: 20px; text-align: left; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);">
<p style="margin: 0;"><<[Comment]>> </p>
<p style="font-size: 14px; color: #333; margin-top: 10px;"><strong>Comment By:</strong> <<[Comment By].[Name]>> </p>
</div>
<div style="font-size: 12px; color: #999; text-align: left; margin-top: 20px;">
<p style="margin: 0;">This is an automated message from CRIB Project Management Hub. Please do not reply.</p>
</div>
</div>
</body>
My problem is it looks great in the .html file but the spacing is fully messed up
Now I am very new to this HTML in Email Body Stuff. So please let me know where I went wrong and here is what my bot looks like for everyone's reference.
If you want additional information please let me know
Thanks in Advance 🙌
Solved
1 ACCEPTED SOLUTION
For anyone who ran into this issue. I am leaving the answer here:
Just remove the indentation bro I wasted like half my work day tryna figure this out 😫 I just asked chatgpt to write it all again without any indentation in a single line and boom works like a charm.
<body style="margin: 0; padding: 0; width: 100%; font-family: 'Roboto', sans-serif; color: #333;"><div style="width: 100%; max-width: 600px; margin: 0 auto; padding: 20px; background-color: #f1f8ff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);"><div style="text-align: left; padding-bottom: 10px;"><h1 style="font-size: 22px; color: #333; margin: 0;">New Attachment Added & You’re Mentioned!</h1></div><div style="font-size: 16px; text-align: left; margin-bottom: 15px;"><p style="margin: 0; color: #6c757d;">An attachment has been added and you’ve been mentioned in the following project:</p></div><div style="font-size: 14px; color: #555; margin-top: 5px; text-align: left;"><p style="margin: 5px 0;"><strong>Project:</strong> <<[Project]>> </p><p style="margin: 5px 0;"><strong>Mentions:</strong> <<[Mentions]>> </p></div><div style="font-size: 18px; font-weight: bold; background-color: #d1e7dd; color: #0f5132; padding: 15px; border-radius: 5px; margin-top: 20px; text-align: left;"><p style="margin: 0;"><<[Attachment Title]>> </p><p style="font-size: 14px; color: #333; margin-top: 10px;"><strong>Attachment Type:</strong> <<[Attachment Type]>> </p></div><div style="text-align: left; margin-top: 20px;"><a href="<<[File]>>" style="display: inline-block; font-size: 14px; color: #ffffff; background-color: #0f5132; padding: 10px 20px; text-decoration: none; border-radius: 5px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">View Attachment</a></div><div style="font-size: 12px; color: #999; text-align: left; margin-top: 20px;"><p style="margin: 0;">This is an automated message from CRIB Project Management Hub. Please do not reply.</p></div></div></body>
For anyone who ran into this issue. I am leaving the answer here:
Just remove the indentation bro I wasted like half my work day tryna figure this out 😫 I just asked chatgpt to write it all again without any indentation in a single line and boom works like a charm.
<body style="margin: 0; padding: 0; width: 100%; font-family: 'Roboto', sans-serif; color: #333;"><div style="width: 100%; max-width: 600px; margin: 0 auto; padding: 20px; background-color: #f1f8ff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);"><div style="text-align: left; padding-bottom: 10px;"><h1 style="font-size: 22px; color: #333; margin: 0;">New Attachment Added & You’re Mentioned!</h1></div><div style="font-size: 16px; text-align: left; margin-bottom: 15px;"><p style="margin: 0; color: #6c757d;">An attachment has been added and you’ve been mentioned in the following project:</p></div><div style="font-size: 14px; color: #555; margin-top: 5px; text-align: left;"><p style="margin: 5px 0;"><strong>Project:</strong> <<[Project]>> </p><p style="margin: 5px 0;"><strong>Mentions:</strong> <<[Mentions]>> </p></div><div style="font-size: 18px; font-weight: bold; background-color: #d1e7dd; color: #0f5132; padding: 15px; border-radius: 5px; margin-top: 20px; text-align: left;"><p style="margin: 0;"><<[Attachment Title]>> </p><p style="font-size: 14px; color: #333; margin-top: 10px;"><strong>Attachment Type:</strong> <<[Attachment Type]>> </p></div><div style="text-align: left; margin-top: 20px;"><a href="<<[File]>>" style="display: inline-block; font-size: 14px; color: #ffffff; background-color: #0f5132; padding: 10px 20px; text-decoration: none; border-radius: 5px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">View Attachment</a></div><div style="font-size: 12px; color: #999; text-align: left; margin-top: 20px;"><p style="margin: 0;">This is an automated message from CRIB Project Management Hub. Please do not reply.</p></div></div></body>
