Search code examples
htmlcsshtml-emailmailchimpemail-templates

Mailchimp - How add variable text above image

I create several templates in mailchimp and export the html to implement in my project in lavarel. In each email template I update the code to read my variables.

My problem is: I want to add variable text above the image in gmail. It works in other email clients but in gmail doesn't work.

In gmail it shows like this: enter image description here

and in my client mail show well: enter image description here

My code:

<div class="month-center" style="position: relative; margin: 0 auto; right: 0; left: 0;">
   <strong style="position: absolute; vertical-align: middle; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);left: 0; right: 0; color: white; font-size: 2em; font-family: Arial, 'Helvetica Neue', Helvetica, sans serif;">Setembro</strong>

    <img align="center" alt="" src="https://gallery.mailchimp.com/a9d87c79b29239577e5d51e67/images/1ff7f4b7-c17a-498e-be89-1816b2cbf1a3.jpg" width="300" style="max-width:300px; padding-bottom: 0; display: inline !important; vertical-align: bottom;" class="mcnImage">
  </div>

I think the problem is with some CSS attributes that Gmail doesn't accept like position absolute.

How can I solve this?

Solution

  • You are correct, Gmail (and a lot of email clients) do not support position.

    One solution to your problem would be to use a background image instead of positioning.

    https://backgrounds.cm/ is the best tool for generating email friendly background images.

    https://www.campaignmonitor.com/css/ is the best resource for checking CSS compatibility across a number of email clients.