1

I have added a code block on top of my dynamic email template (code given below). It looks perfect in Preview mode, but entirely different when actual email is sent

here's how it looks

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
  position: relative;
  text-align: center;
  color: white;
}
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 32px;
  color: #000000;
  font-weight: 600;
}
</style>
</head>
<body>
<div class="container">
  <img src="http://cdn.mcauto-images-production.sendgrid.net/1714a3d54002df2a/a0f350e5-2a93-4de4-9d6b-a747ccb068a0/626x240.png" style="width:100%;">
  <div class="centered">CA {{first_name}}</div>
</div>

</body>
</html>

What I am trying to achieve is some text in center of an image. Is there something wrong/missing in my code? Kindly guide me on this. Thanks!

philnash
  • 70,667
  • 10
  • 60
  • 88
Sonal
  • 137
  • 2
  • 13
  • 1
    HTML Email is a proverbial biatch - most of the time it doesn't work and if it does, it doesn't in the way you intended. Best method is 1) use method by @philnash below and 2) check your email literally on *all* major email recipient clients (and in this case literally really is not ment figuratively) – riffnl Nov 04 '21 at 22:55

1 Answers1

0

Twilio SendGrid developer evangelist here.

That isn't working because position: absolute does not work in many email clients. This is also why it is important to test your emails in email clients after you have used preview mode.

Check out this article on faux absolute position and this article on overlays they should point you in the right direction to fix this up.

philnash
  • 70,667
  • 10
  • 60
  • 88