Nodemailer is experiencing issues with displaying HTML content correctly

<div style = "height:auto;width:auto; background-color:#5C81F4;display:flex; justify-content:center;">
    <div style="display:flex;flex-direction:column; width:90vw;height:auto;overflow:hidden;border-radius:20px; background-color:#ffffff;margin-top:40px;margin-bottom:40px;">
    <h1 style="display:flex; justify-self:center; align-self:center;color:#2A2836;">Quote of the Day</h1>
    <p style = "font-size:30px;height:auto; color:#2A2836;margin-left:10px;overflow:hidden;">
      "${quote}"
    </p>
    <p style ="display:flex; margin-right:10px; font-size:20px;color:#2A2836;justify-self:end;align-self:end">- <i>${author}</i></p>
  </div>
  
  </div>

When attempting to email this HTML code, the elements appear in a single horizontal line for the receiver as depicted in the following image: https://i.stack.imgur.com/9TVTt.png

However, when viewed in CodePen, the HTML renders properly as shown below: https://i.stack.imgur.com/onA9v.png

I am unsure where I may have made an error in the HTML code as it appears correct. Any guidance would be appreciated.

htmlcssnode.jsexpressnodemailer

Answer №1

Unfortunately, many email clients do not fully support Flexbox yet.

If your content isn't stacking correctly, it may be due to the use of:

<div style="display:flex;flex-direction:column;">

The flex-direction:column property is poorly supported by some email clients. You can check out more information on this here.

To ensure optimal display across all email clients, consider using a different approach with broader support.

Answer №2

According to @JQueeny's observation, the use of flex-direction:column is not supported. If you are using Gmail, it appears that justify-content is also not supported.

In this scenario, you can implement workarounds like margin:auto, text-align:center, and float:right. (Gmail now allows the use of <style>, but inline styles are recommended for broader compatibility.)

<html>

<head>
  <style>
  .parent {
      height: auto;
      width: auto;
      background-color: #5C81F4;
      display: flex;
    }
    
    .quote-container {
      /* display: flex; */
      /* flex-direction: column; */
      width: 90vw;
      height: auto;
      overflow: hidden;
      border-radius: 20px;
      background-color: #ffffff;
      /* margin-top: 40px;
  margin-bottom: 40px;*/
      margin: 40px auto;
    }
    
    .quote-title {
      /* display: flex; */
      /* justify-self: center; */
      /* align-self: center; */
      color: #2A2836;
      text-align: center;
      width: 100%;
    }
    
    .quote-body {
      font-size: 30px;
      height: auto;
      color: #2A2836;
      margin-left: 10px;
      overflow: hidden;
    }
    
    .quote-author {
      display: flex;
      margin-right: 10px;
      font-size: 20px;
      color: #2A2836;
      float: right;
      /* justify-self: end; */
      /* align-self: end */
    }
  }
  </style>
</head>

<body>
  <div class="parent">
    <div class="quote-container">
      <h1 class="quote-title">Quote of the Day</h1>
      <p class="quote-body">
        "To be yourself in a world that is constantly trying to make you something else is the greatest accomplishment."
      </p>
      <p class="quote-author">-
        <i>Roshan Ojha</i>
      </p>
    </div>
  </div>
</body>

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Verify if there is a date present within the JSON entity

I have a PHP array containing date strings and I want to validate them using a native HTML5 date input element. To achieve this, I have converted the date array into a JSON object for use with JavaScript: <script> var date_array = <?php echo json ...

javascriptjsonhtmldateobject

JavaScript Function Not Executed in Bottom Section

I've implemented AngularJS includes in my project. Below is the code snippet from my index.html: <!DOCTYPE html> <html ng-app=""> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> ...

javascriptjqueryhtmlcssangularjs

Having trouble loading styles in Vue after publishing to npm

I'm currently using vue-cli3 for the npm publication of a Vue component. Below are my build scripts: "package-build": "eclint fix && vue-cli-service build --target lib --name @xchat-component/chat-component ./src/index.ts & ...

cssvue.jsnpmwebpackvue-cli

What is the reasoning behind exporting it in this manner in the index file?

As I was going through a tutorial about nests, there was this step where the instructor made a folder named "dtos" and inside it, they created two dto files (create-user.dto and edit-user.dto). Following that, they also added an index file in the same fold ...

javascriptnode.jstypescriptexpressnestjs

Analyzing nested arrays for email addresses using Node.js

I need help extracting key/value pairs from a nested array submitted by Angular to a Node.js server in order to populate a confirmation email. I have tried using var email = req.body.email for the top-level items and var cost = req.body.detail.cost for dee ...

node.jsexpress

The node module fails to ignore its own node_modules directory, causing issues during deployment on Heroku

I'm currently facing an issue with the aws-sdk module. The problem lies in its .gitignore file which is ignoring its own node_modules directories, causing complications with my Heroku deployment. Has anyone come across a similar situation and found a ...

node.jsgitherokunpm

Swap out the %20, which signifies a space in the iron router context

I am attempting to substitute the %20, which signifies a space in the URL, with a different character. Router.map(function () { this.route('promos', { path: '/:promo_name', waitOn: function(){ return Meteor.subscribe( ...

javascriptnode.jsiron-routermeteor

How can you apply a function to the Jade output on the client side?

I am looking to utilize a function to parse tweets on the client side using content delivered through Node.js/Express/Jade. String.prototype.parseHashtag = function() { return this.replace(/[#]+[A-Za-z0-9-_]+/g, function(t) { var tag = t.repla ...

parsingnode.jsclient-sideexpresspug

What exactly is the significance of "hash" in terms of Internet Explorer style

After downloading a sample CSS file, I noticed the following entry: #text-align: right; The comment beside the entry mentioned that this expression is specifically for justifying it in IE, while text-align: right; works for Safari and Chrome. My questi ...

css

JavaScript encounters a parsing error when dealing with an async function

Ever since I developed a node.js web application, I've been utilizing MSSQL for the database. To streamline SQL functions, I crafted functions (sql.js) to handle all the necessary queries. Furthermore, I set up async function handlers (controllers.js) ...

javascriptnode.jsexpressasync-awaiteslint

authentication loopback rest api endpoint

I have implemented an endpoint for downloading a CSV file, but I would like to add authentication to the endpoint. This means that users should be asked for their username and password before they can download the CSV file. I am specifically looking to ach ...

node.jsloopbackjs

Encountering an EPIPE error while using html-pdf in a meteor

Currently, I am encountering an issue with my Meteor app when rendering a PDF server-side using the html-pdf package. The application is deployed with mup. While everything works perfectly fine locally, a server log error occurs upon deployment: events.js ...

node.jspdfmeteornpmphantomjs

Encountering issues with implementing useStyles in Material-UI components

Currently, I am working on a project utilizing Material-UI's library and encountering styling issues. This project marks my initial venture into ReactJS and JavaScript in general. Therefore, any assistance would be greatly appreciated! I am struggli ...

cssreactjsmaterial-ui

Overriding default styles in an Angular component to customize the Bootstrap navbar

Is there a way to alter the color of the app's navbar when a specific page is accessed? The navbar is set in the app.component.html file, and I am attempting to customize it in a component's css file. app.component.html <nav class="navbar na ...

cssangularbootstrap-4

What are the advantages of utilizing the 'data' event instead of the 'readable' event?

According to the stream documentation: Note: Typically, using the readable.pipe() and 'data' event methods is recommended over relying on the 'readable' event. But why is the 'data' event considered better than the 'r ...

node.js

What is the best way to display grouped items horizontally in an ASP.NET ListView?

My ASP ListView currently displays items vertically in columns with GroupItemCount set to 3: A D G B E H C F I Is there a way to adjust the display so that it groups items horizontally in rows like this? A B C D E F G H I This is the ListVi ...

.netasp.netcsslistviewhtml

What are the steps to create an AngularJS application with AWS integration?

Should I deploy an EC2 instance and set up a web server like Node.js on it, or is it necessary to use the AWS SDK for JavaScript? (Please note that this project involves interacting with an application server, not just a static AngularJS app) ...

javascriptnode.jsangularjsamazon-web-servicesamazon-ec2

Encountering a 400 bad request error while trying to post data using

const fetch = require("node-fetch").default; let iApi = express.Router(); iApi.post("/update/:name/:value", async (req, res) => { const name = req.params["name"]; ...

javascriptnode.jsnode-fetch

Ways to verify the functionality of RabbitMQ despite the HTTP port being disabled

Before starting the process, it is essential to ensure that RabbitMQ is up and running. The http port has been disabled for security reasons, and we are currently using amqp for connections. Is there a way to perform a health check in this scenario? Previ ...

node.jsrabbitmqamqp

PHP: the images uploaded are not located within the designated folder

Having trouble uploading multiple images to a folder and saving them in the database? The images are not moving to the folder, even though the code works on localhost. Here is the code snippet: var abc = 0; // Declaring and defining global incremen ...

javascriptphphtmlcss