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

Troubleshooting an npm peerDependency problem between grunt and flatiron peers

While initially writing this question, I managed to solve the issue on my own. However, I will still share both the problem and solution here in case it can benefit someone else. Additionally, if anyone has insights on the reasoning behind what occurred, I ...

node.jsnpmgruntjsnodejitsu

On the initial page load, Magento is failing to load the CSS properly

I've been tinkering with the Magento website over at For some reason, the CSS on the Home page doesn't load initially, but it loads fine when you click on any other link like Products or Gallery. Any ideas why this might be happening? Thanks in ...

cssmagentoload

Encountering a CORS header issue when using socket.io and nodejs on an apache2 server

I am currently learning how to implement socket.io within Laravel, but I am encountering an error that says Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:3001/socket.io/?EIO=3&transport=p ...

node.jswebsocketsocket.io

Is there a way to emphasize a particular day on the calendar obtained from the URL?

I have implemented FullCalendar functionality to enable users to select a specific date, retrieve data from a database, and then reload the page with that data. The page is updated with the selected date in the URL. However, when the page reloads, althoug ...

javascriptcssfullcalendar

Animate hovering over a specific element within a group of similar elements using jQuery

Hi there! I recently started exploring Js and jQuery, and I was able to create a cool width change animation on a div when hovering over another. However, I ran into an issue when trying to implement this with multiple sets of similar divs. Whenever I hove ...

javascriptjqueryhtmlcss

Borders appear to be missing in the card-like div layout

Despite using the same color for the outer border and inner borders, I am having trouble getting the inner borders to show up. Can anyone provide guidance on how to display both the inside and outside borders? Note: I have attempted changing the color, bu ...

jqueryhtmlcssborderbootstrap-4

Is it possible to utilize a single template and dynamically fill it with content as needed?

Is there a method to utilize a single template and dynamically insert content into it? http://jsfiddle.net/cmckeachie/mtV62/light/ var routingExample = angular.module('FunnyAnt.Examples.Routing', []); routingExample.controller('HomeControl ...

angularjshtmlroutesangular-routingangularjs-templates

The negative z-index is causing issues with my ability to select classes using jQuery

By setting a z-index of -3 for several divs in my background, I thought they wouldn't affect the formatting of elements in the foreground. But now I'm facing an issue where I can't click on those background divs when trying to target them wi ...

javascriptjqueryhtmlcss

Eliminating the need for session and socket pooling in Sails.js

Hello, I am currently developing my rest api app using sails. I came across an interesting article on improving Node.js performance, which you can find here. One of the suggestions in point 2 was to eliminate socket pooling by setting options.agent to fal ...

node.jssocketssessionexpresssails.js

developing authentication codes using javascript

Currently, I am working on developing a sign-up system that allows users to easily generate a random string with the click of a button. The generated string can then be shared with non-users who wish to sign up. The new user will need to enter their chose ...

javascriptnode.jsfunctionexpress

Obtain pictures from MongoDB for a website using Angular6

I'm currently in the process of developing my website and I want to showcase an image from my database on the header. Each customer is assigned a unique logo based on their ID, but I'm unsure how to use Angular to display it. Below is my code s ...

htmlangularimageangular6

What is the process for transforming a promise outcome into JSON format?

My current challenge involves using axios to retrieve JSON data from an external API in my backend and then passing it to the frontend. The issue arises when I attempt to log the result in the frontend, as all I see is a promise object instead of the actua ...

javascriptnode.jsreactjses6-promise

Is it possible to utilize a variable as a column name in MySQL when working with Express?

At the moment, I am encountering an issue where the table name is surrounded by quotation marks as it is a string. This causes the server to crash. const update = 'the name of my column'; const UpdateQuery = `UPDATE scores SET ${mysql.escap ...

javascriptmysqlnode.jsexpress

Nested elements not transitioning using CSS

Why is my transition not being applied to the submenu <a> tag? The color change is working fine, but the transition does not occur on hover. When I use the same rules on another element with a different main class, it works perfectly. It seems like t ...

htmlcsscss-transitions

Encountering a problem when attempting to send an HTML email through PHP

Trying to use PHP to send email within an HTML code snippet. Here's the code I've written: <?php if($_SERVER['REQUEST_METHOD'] == 'POST') { if ( mail ('<a href="/cdn-cgi/l/email-protection" class="_ ...

phphtmlemail

Next.js page freezes when Axios request is made causing the tab to become unresponsive

Curious about how to troubleshoot (or where to start) with my current Axios problem. I am working on a Next.js project (12.3) and have an axios interceptor hook that manages all of my internal requests. The interceptor functions properly on every action/pa ...

node.jsreactjstypescriptnext.jsaxios

What is the process of dynamically loading CSS into an HTML document?

In my C# program, I am utilizing a web browser control and setting its HTML property programmatically by loading it from an HTML string variable. While this setup works almost perfectly, I have noticed that it loses the reference to the CSS file. I believe ...

c#javascriptcss

Error: Attempting to access the 'email' property of an undefined variable is not allowed

router.post('/login', async (res, req) => { const{error} = loginValidation(req.body); if (error) return res.status(400).send(error.details[0].message); //user validation const user = await User.findOne({ email: req.body.em ...

node.jsmongodbexpressmongoose

Guide to displaying an HTML input box when the option 'other' is chosen using PHP

I am currently trying to find a way to display an HTML input field when the "other" option is selected from a dropdown menu. The options in the dropdown list are populated by a MySQL database query, which is functioning correctly. However, I am strugglin ...

phphtml

Employ jQuery to set values for hidden input elements

I'm facing an issue where I need to assign a value to a hidden field on a form that I attach to a div when a button is clicked. Below is the snippet of my HTML code: <div style="margin-bottom:5px" class="comment" data-commentID="<?php echo $c- ...

phpjqueryhtml