CODEWITHSUNDEEP
htmlcsshtml-emailsendgrid
Hoàng Nguyễn
Hoàng Nguyễn

Reputation: 1170

Sendgrid email renders differently on Gmail and Microsoft Outlook

I create a template on Sendgrid as a standard email, I tested on Gmail in different devices, it works fine, until I try Outlook, it looks like all of my css, images are gone. So what is the root cause?

Here is my html code:

<div style="font-family: 'Poppins', Helvetica, sans-serif;">
  <div style="background-color: black; position: relative; padding-top: 30px; padding-bottom: 30px;">
    <img src="image.png" 
      style="height: auto; width: 135px; position: absolute; top: 0; bottom: 0; margin: auto; padding-left: 16px;">
  </div>

  <div style="padding: 10px; text-align: center;">
    <img src="image.png" 
      style="width: 40px; height: auto; margin-bottom: 16px;">
    <p style="margin: 0; padding: 0; color: #00cc66; font-size: 24px; font-weight: bold;">Email Confirmation</p>
  </div>

  <div>
    <div style="padding: 16px; color: black;">
      <p>Hi -Name-,</p>
      <p>Welcome.</p>
      <p>Please confirm your email-address by clicking the button below.</p>
    </div>

    <div style="text-align: center; padding-bottom: 15px;">
      <a href="-EmailConfirmUrl-" target="_blank">
        <button style="border: none; cursor: pointer; background: #2840ff;
          color: white; width: 200px; height: 48px; text-transform: uppercase; 
          font-size: 0.8rem; outline-style: none; 
          background-image: linear-gradient(to top right, #2840ff, #22eaff); box-shadow: 0px 1px 15px -2px lightgrey;">
          Verify Email Now
        </button>
      </a>
    </div>

    <div style="text-align: center; background: #2840ff; color: white;
      background-image: linear-gradient(to top right, #2840ff, #22eaff); bottom: 0; padding: 4rem 0;">
      <img src="image.png" 
        style="height: 20px; width: 160px;">
        <p style="color: #ced4da; font-weight: 300;">
          Copyright © 2018. All rights reserved.
        </p>  
      </div>
    </div>
</div>

Upvotes: 2

Views: 3185

Answers (1)

Domenik Reitzner
Domenik Reitzner

Reputation: 1613

You can't use standard css3 in your emails, if it has to work in outlook.

Outlook is using the HTML rendering engine of Microsoft Word (sad, but true).

There are a lot of amazing tips and tricks on how to make email work in (all) clients.

Here are just a view links:

Upvotes: 1

Related Questions