Gmail display issues with inline CSS for Mailchimp email buttons

I’m having trouble with my Mailchimp email template buttons in Gmail. They look weird when I use inline CSS.

Here’s what’s going on:

  • The buttons look fine in Apple Mail, with or without inline CSS
  • In Gmail, they look bad when inline CSS is on
  • They used to look good in Gmail with inline CSS off, but other stuff was messed up

I tried fixing some issues based on advice I found online. It helped with most things, but now the buttons are the problem.

Has anyone else run into this? Any ideas on how to make the buttons look better in Gmail while keeping inline CSS on? I’m stumped and could really use some help!

I’ve encountered similar issues with Mailchimp templates in Gmail. One solution that’s worked well for me is using table-based layouts for buttons instead of relying on CSS. Here’s a simple example:

Click Me

This approach tends to render more consistently across email clients, including Gmail. It’s not as elegant as pure CSS, but it gets the job done. Remember to test thoroughly before sending out your campaign.

I’ve dealt with similar Gmail display issues for Mailchimp emails. It’s frustrating, but there’s a workaround that’s worked for me. Instead of relying solely on inline CSS for buttons, try using a hybrid approach. Create a separate CSS class for your buttons in the section of your email, then apply that class to your button elements along with minimal inline styles.

For example:

.button { background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; }

Click me

This method has given me more consistent results across email clients, including Gmail. It might take some trial and error, but it’s worth experimenting with. Also, always test your emails in multiple clients before sending them out to your list.