HTML Email – Gmail positioning

[ninija]

Hi there,

I am working on an HTML email, where I tried to overlay (center) some copy (Stephanie) on an image, which then sits on top of a table.
http://codepen.io/Nini/pen/BpQwNR

Unfortunately the result on Gmail is that the copy is displayed below the image. Any suggestions, if there is a way to fix this issue for Gmail?

Cheers,
Nini

<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:660px;margin-top:50px;">
  <tr>
    <td align="center" valign="top" style="padding:0px 0px 20px 0px;background: #9287bb; border-radius: 20px; height: 250px; position: relative;">
      <img src="http://backend.playbrush.com/static/images/emails/profil.png" valign="top" width="270px" style="max-width:270px; display:block;       position: absolute;left: 30% !important;top: -5% !important;"></img>
     <h3 valign="top" style="text-align: center; display:block; position:relative; padding: 0 !important; top:4%;  left: 0%;  font-size: 18px;font-weight: bold; color: white; font-family: Source Sans Pro, Helvetica, Arial, sans-serif;margin: 0 !important;">Stephanie</h3>

    <h2 style="font-size: 28px; color: #440160;font-family: Source Sans Pro, Helvetica, Arial, sans-serif;margin-bottom: 0px;margin-top:4%;">Regularity</h2>
    </td>
  </tr>
</table>

[Shikkediel]

some copy (Stephanie) on an image

the result on Gmail is that the copy is displayed below the image

Do you maybe mean below the table ? Adding a screenshot might help clarify…

[Paulie_D]

Most email clients, including Gmail don’t support positioning very well, if at all.

Here…check out what is supported.

https://www.campaignmonitor.com/css/

[ninija]

Hi Shikkediel,

Thanks – indeed it is displayed below the table.
Here’s a screenshot of how it looks like on Gmail.

https://www.dropbox.com/sh/fbyl71m8l3b44kz/AAD6wg8R6NoeEB0FS4giJIh4a?dl=0

Thanks

[Shikkediel]

Looking at the support table, the only reasonable approach seems to be to add it as a background image.

[Author]

Posts