0

I am working on a web project with react and MUI, the code takes information that a user writes and pass it to an HTML template then it sends it by email. One of the problems I have is that when I check the email the HTML is not vertically center (see image)1. To center the HTML I am using:

display: flex;
justify-content: center !important

What is odd is that if I test the HTML, it works, but when I check the email either on chrome or Firefox it does not work. Checking the devtools the value justify-content: center !important is never there. If I added manually it will center the content the way I wanted.

This is the code:

import dgoow from "../images/dgo 2.png";

export const emailBody = (event, date, channels, priority, countries) => {
  return `
<html>
<head>
  <style>
    * {
      font-family: Helvetica, Arial, sans-serif;
    }
    h1 {
      color: white;
    }
    h3,
    h5 {
      color: white;
    }
    table {
      border: none;
    }
    button {
      color: white;
      border-radius: 5px;
      font-family: Helvetica, Arial, sans-serif;
      font-weight: bold;
      font-size: 16px;
      cursor: pointer;
      background-color: #fd8204;
      border: none;
      padding: 1rem;
      margin-bottom: 2rem;
    }
    img {
      height: 70px;
      width: 150px;
    }
    #myElement{
      display: flex;
      justify-content: center !important;
    }
  </style>
</head>
<body id="myElement">
  <div id='dos' style="background-color: #050914;border-radius: 10px;padding: 3rem;width: 800px;margin: 3rem;"> 
  <table>
      <tr>
        <td style="text-align: start; padding: 1rem; width: 50%; position: relative;">
          <img src=${dgoow} alt="DWEGO logo" />
        </td>
        <td style="text-align: end; padding: 1rem; width: 50%; position: relative;">
          <img src=${dgoow} alt="DWEGO logo" />
        </td>
      </tr>
      <tr>
        <td colspan="2" style="text-align: center; font-size: 20px">
          <h1>HWRTE Notification</h1>
        </td>
      </tr>
      <tr>
        <td colspan="2" style="text-align: center; font-size: 20px">
          <h3>Event: ${event}</h3>
        </td>
      </tr>
      <tr>
        <td colspan="2" style="text-align: center; font-size: 20px">
          <h3>Date: ${date}</h3>
        </td>
      </tr>
      <tr>
        <td colspan="2" style="text-align: center; font-size: 20px">
          <h3>Channels: ${channels}</h3>
        </td>
      </tr>
      <tr>
        <td colspan="2" style="text-align: center; font-size: 20px">
          <h3>Priority: ${priority}</h3>
        </td>
      </tr>
      <tr>
        <td colspan="2" style="text-align: center; font-size: 20px">
          <h3>Countries: ${countries}</h3>
        </td>
      </tr>
      <tr>
        <td colspan="2" align="center">
          <a href="www.google.com" target="_blank">
            <button>JOIN THE BRIDGE</button>
          </a>
        </td>
      </tr>
    </table>
  </div>
</body>
</html>`;
};

Another error I have is with the images, they are not loading not sure why.

Felipe Useda
  • 7
  • 2

1 Answers1

0

According to this post, the display:grid/flex is not supported by most email clients.

I replaced the following CSS:

#myElement{
  display: flex;
  justify-content: center !important;
}

with

#myElement{
  text-align:center";      
}

It works.

If you are using the nodemailer to send email, you can refer to this page for sending embedded images.

The KNVB
  • 3,588
  • 3
  • 29
  • 54