CODEWITHSUNDEEP
csspug
nermineslimane
nermineslimane

Reputation: 616

Pug doesn't render css in emails

I'm facing a problem with pug/jade, I have a HTML template that is perfect the way i need it and i also have to send the email using node mailer so i figured i would use pg template renderer, this waay worked for me for previous templates perfectly. But this time i have converted the html to pug using this online converter : online converter

This is what the email should look like: expected output Insted this is what i'm getting

actual output Here's the pug template:

doctype transitional
html(xmlns='http://www.w3.org/1999/xhtml')
  head
    meta(http-equiv='Content-Type' content='text/html; charset=utf-8')
    meta(http-equiv='X-UA-Compatible' content='IE=edge')
    meta(name='viewport' content='width=device-width, initial-scale=1.0')
    title w3newbie HTML Email
    style(type='text/css').
      body {
      Margin: 0;
      padding: 0;
      background-color: white;
      }
      .wrapper{
      width: 100%;
      table-layout: fixed;
      padding-bottom: 40px;
      position: absolute;
      z-index: 1;
      }
      .webkit{
      max-width: 800px;
      background-color:#F2F2F8;
      padding-top: 70px;
      overflow: hidden;
      border-radius: 10px;
      max-height: 300px;
      }
      .logo-small{
      width: 80px;
      margin-bottom: 20px;
      margin-left: 30px;
      }
      .logo-large{
      width: 120px;
      margin-top: 20px;
      }
      .background-rectangle-top-large{
      width: 270px;
      height:230px;
      border: 1px solid #F2F2F8;
      border-radius: 5px;
      position: absolute;
      right: 0px;
      display: flex;
      justify-content: flex-end;
      }
      .background-rectangle-top-small{
      background-color:#F8F8FB;
      width:250px;
      height: 210px;
      border-radius: 5px;
      }
      .background-rectangle-bottom-large{
      width: 300px;
      height:430px;
      border: 1px dashed #F2F2F8;
      border-radius: 5px;
      display: flex;
      justify-content:flex-start;
      align-items: flex-end;
      box-sizing: border-box;
      }
      .background-rectangle-bottom-small{
      background-color:#F8F8FB;
      width:270px;
      height: 400px;
      border-radius: 5px;
      display: flex;
      align-items: flex-end;
      }
      .image-email{
      width: 200px;
      position: absolute;
      z-index: 2;
      }
      .social-icon{
      width: 20px;
      margin-bottom: 20px;
      margin-left: 30px;
      }
      .content-small{
      background-color: white;
      border-radius:0px 100px 0px 0px;
      margin-top: 10px;
      transform: matrix(0.99, -0.2, 0.15, 0.96, 0, 0);
      width: 770px;
      height: 700px;
      }
      .content-text-code{
      position: absolute;
      z-index: 5;
      padding-top: 70px;
      font-family: 'Roboto', sans-serif;
      font-weight: 300;         color: #777;
      max-width: 700px;
      }
      .content-text-note{
      position: absolute;
      z-index: 4;
      padding-top: 170px;
      font-family: 'Roboto', sans-serif;
      font-weight: 300;         color: #777;
      max-width: 700px;
      text-align: center;
      }
      .footer-text {
      position:absolute;
      bottom: 0;
      width: 100%;
      text-align: center;
      font-family: 'Roboto', sans-serif;
      font-weight: 300;         font-size: 15px;
      margin-bottom: 60px;
      color: #4F5E7B;
      }
      .button-style{
      margin-top: 130px;
      background-color: transparent;
      width: 220px;
      height: 40px;
      position: absolute;
      z-index: 5;
      border-radius: 10px;
      border: 1.5px solid #6E4998;
      color: #6E4998;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: 'DM Sans', sans-serif;
      font-size: 15px;
      }
      .link-style{
      color: #6E4998;
      opacity: 0.6;
      }
      .title-style{
      position: absolute;
      z-index: 4;
      padding-top: 2px;
      font-family: 'Roboto', sans-serif;
      font-style: normal;
      line-height: 114%;
      text-align: center;
      color: #5E5873;
      }
      @media screen and (max-width: 800px) {
      .webkit{
      max-width: 700px;
      max-height: 300px;
      }
      .content-text-note{
      font-size: 15px;
      max-width: 700px;
      }
      .content-text-code{
      font-size: 14px;
      max-width: 700px;
      }
      }
      @media screen and (max-width: 700px) {
      .background-rectangle-top-large{
      width: 230px;
      height:200px;
      }
      .background-rectangle-top-small{
      width: 210px;
      height:180px;
      }
      .background-rectangle-bottom-small{
      width: 200px;
      height:400px;
      }
      .background-rectangle-bottom-large{
      width:220px;
      height:430px;
      }
      .image-email{
      width: 180px;
      }
      .logo-large{
      width: 100px;
      }
      .logo-small{
      width: 70px;
      }
      .social-icon{
      width: 15px;
      }
      .webkit{
      max-width: 600px;
      max-height: 300px;
      }
      .content-small{
      width: 600px;
      height: 600px;
      }
      .content-text-code{
      font-size: 14px;
      max-width: 500px;
      }
      .content-text-note{
      font-size: 12px;
      max-width: 600px;
      }
      .button-style{
      margin-top: 130px;
      width: 200px;
      height: 36px;
      font-size: 15;
      }
      .title-style{
      font-size: 20px;
      }
      }
      @media screen and (max-width: 600px) {
      .background-rectangle-top-large{
      width: 150px;
      height:250px;
      }
      .background-rectangle-top-small{
      width: 130px;
      height:230px;
      }
      .image-email{
      width: 150px;
      }
      .logo-large{
      width: 90px;
      }
      .logo-small{
      width: 60px;
      }
      .social-icon{
      width: 13px;
      }
      .webkit{
      max-width: 500px;
      max-height: 310px;
      }
      .content-small{
      width: 500px;
      height: 500px;
      }
      .background-rectangle-bottom-small{
      width: 180px;
      height:400px;
      }
      .background-rectangle-bottom-large{
      width:200px;
      height:430px;
      }
      .footer-text {
      font-size: 12px;
      margin-bottom: 40px;
      }
      .content-text-note{
      font-size: 11px;
      max-width: 500px;
      }
      .title-style{
      font-size: 18px;
      }
      }
      @media screen and (max-width: 500px) {
      .content-text-code{
      font-size: 12px;
      max-width: 400;
      }
      .content-text-note{
      font-size: 9px;
      max-width: 400px;
      padding-top: 200px;
      }
      .button-style{
      margin-top: 160px;
      }
      }
      @media screen and (max-width: 400px) {
      .content-text-code{
      font-size: 12px;
      padding-top: 60px;
      max-width: 200;
      }
      .content-text-note{
      font-size: 8px;
      padding-top: 220px;
      max-width: 350px;
      }
      .webkit{
      max-width: 400px;
      max-height: 320px;
      }
      .content-small{
      width: 370px;
      height: 500px;
      border-radius:0px 70px 0px 0px;
      margin-top: 8px;
      }
      .background-rectangle-bottom-small{
      width: 160px;
      height:400px;
      }
      .background-rectangle-bottom-large{
      width:180px;
      height:430px;
      }
      .background-rectangle-top-large{
      width: 120px;
      height:250px;
      }
      .background-rectangle-top-small{
      width: 100px;
      height:230px;
      }
      .footer-text {
      font-size: 10px;
      margin-bottom: 50px;
      }
      .button-style{
      margin-top: 160px;
      width: 180px;
      height: 30px;
      font-size: 8;
      }
      }
  body
    .background-rectangle-top-large
      .background-rectangle-top-small
    div(style='width: 100%;display: flex;justify-content: center;align-items: center;')
      img.logo-large(src='img/logo.png')
    div(style='width: 100%;display: flex;justify-content: center;align-items: center;margin-top: 110px;')
      img.image-email(src='img/SignUp.png')
    center.wrapper
      .webkit
        .outer(align='center')
          div(style='justify-content: center;display: flex; ')
            h2.title-style
              | Thank you for registering!
            h7.content-text-code
              | Please verify your email address by clicking the button below and join our creative community, start exploring resources or showcasing your work.
              | If you have not registered with Cynoia, please ignore this email or contact us at 
              a.link-style(href='[email protected]') [email protected]    
            button.button-style(onclick="window.location.href='https://w3docs.com';" type='button')
              | VERIFY EMAIL
            p.content-text-note
              | Or paste this link into your browser 
              br
              a.link-style(href='https://auth.cynoia.app/reset-password/eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6NSwiZW1haWwiOiJrLm5hY2V1ckBjeW5va\
              WEuY29tIiwiaWF0IjoxNjQ0MjQ3NTYwLCJleHAiOjE2NDQ0MjAzNjB9.YEkmdZESx3XuwYjl\
              8TmY3P5XiVXSfFpjPU2Tz6qbmmo')
                | https://auth.cynoia.app/reset-password/eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6NSwiZW1haWwiOiJrLm5hY2V1ckBjeW5va
                | WEuY29tIiwiaWF0IjoxNjQ0MjQ3NTYwLCJleHAiOjE2NDQ0MjAzNjB9.YEkmdZESx3XuwYjl
                | 8TmY3P5XiVXSfFpjPU2Tz6qbmmo
          .content-small
    div(style='position:absolute;bottom: 0px;width: 100%;')
      .background-rectangle-bottom-large
        .background-rectangle-bottom-small
          img.logo-small(src='img/logo.png')
    .footer-text
      p
        | Not sure why you received this email? Please 
        a.link-style(href='https://responsivehtmlemail.com') let us know ,
        |           The Cynoia Team
      p(style='font-size: 13px;')
        | Use of our service and website is subject to our 
        a.link-style(href='https://responsivehtmlemail.com') Terms of Use 
        | and 
        a.link-style(href='https://responsivehtmlemail.com') Privacy Policy
        | .
    div(style='position: absolute;right: 0px;display: flex;justify-content: flex-end; bottom: 0px; margin-right: 20px;')
      a(href='https://www.facebook.com/cynoia')
        img.social-icon(src='img/facebook.png')
      a(href='https://https://twitter.com/cynoia')
        img.social-icon(src='img/twitter.png')
      a(href='https://https://www.youtube.com/channel/UCegLC3NS7qKXSrfWCZE0Gl')
        img.social-icon(src='img/youtube.png')
      a(href='https://www.linkedin.com/company/cynoia/')
        img.social-icon(src='img/linkedin.png')

I wonder if you can help me identify the problem ?

Upvotes: 0

Views: 908

Answers (1)

nermineslimane
nermineslimane

Reputation: 616

After doing so much research over the last days i found out this about html in emails :

  • Some email clients strip out and tags from emails, so it's best to have your CSS written inline within your markup.
  • Another thing about HTML email is we need to use table to make sections instead of div. You can find lot of articles on why email clients support tables instead of divs, but just because I am against it won’t change a thing. The div element is supported in HTML email, but when you will starting adding CSS style on it, you will find divs flying here and there. So we will focus our primary attention on using HTML tables instead.

Here's more reference about how to wirte html for emails: https://templates.mailchimp.com/getting-started/html-email-basics/

Upvotes: 3

Related Questions