-2

I recently found out that an app on shopify has allowed users to add custom code sections, and I've added some to my email templates in the app. In the preview of the email and the test email, the codes work perfectly like this:

Image 1

However, when a real email is sent to my inbox, the alignments are completely messed up:

Image 2

Upon inspection of the email, it seems that my css are all overridden by user agent stylesheet. None of the classes that I created in the css are captured.

This is how I wrote the custom codes:

Image 3

Would anybody please let me know which part Im doing wrong?

Thank you.

tacoshy
  • 10,642
  • 5
  • 17
  • 34
Heng
  • 35
  • 1
  • https://myemma.com/blog/css-in-html-emails-what-you-need-to-know-to-get-started/ https://designmodo.com/html-css-emails/ – raina77ow Aug 14 '22 at 10:37
  • 2
    note that we do not debug pictures. But to give you a first debug: most email clients do not support head style (style tag). As such you need to use `inline-style`. A good start would be to check if an email client supports your properties in the first place: https://www.caniemail.com/ – tacoshy Aug 14 '22 at 11:27
  • Looking at the screenshot (a shot in the dark) you are using Outlook? If yes, you need to give the images a width attribute. Outlook ignores the styles on image element. – Syfer Sep 09 '22 at 00:38

2 Answers2

1

I recommend taking a quick course on email development. It is EXTREMELY different than regular web development. It shouldn't take took long if you already know code. This said however Let me give you a few tips.

  1. Email CSS has to be inline. It is recommended to put it inside <style> CSS here </style>

  2. For images, it is also recommended to add "Display:block" inline, as well as its dimensions.

so something like:

<img src="images/facebook.png" style="display:block; height:100px; width:100px" width="100" height="100">

and yes, add them both as properties of the image, as well as through the style property on the image block. Adding them twice ensures that all email clients read them.

  1. for maximum email client support, it is recommended to use TABLES instead of DIVS. So instead of

    <div id="lookAtMyTable> stuff here </div>

Youd need to do something like

<table cellpadding="0" cellspacing="0" style="your styles here" width="600" >
     <tr>
        <td> stuff here </td>
     </tr>
</table>

etc.

Take note of how I add dimensions to almost every element inline on the tag itself.

Lastly, depending on how far-reaching your account emails are, id also recommend registering for an email testing platform like LITMUS to test your email layouts on various email clients because they do change client to client.

Hope this steers you in the right direction.

Syfer
  • 4,262
  • 3
  • 20
  • 37
somdow
  • 6,268
  • 10
  • 40
  • 58
  • 1
    it is not recommended to put it between `` (head style/style tag). As you correctly said, `inline-style` has to be used ( style-attribute: `style=""`). – tacoshy Aug 14 '22 at 13:01
  • Hi, thank you for your advices and suggestions. I truly appreciate them. Will try to convert the internal css to inline css. – Heng Aug 14 '22 at 14:50
  • In your example for code, a div would be better as its a block element spanning all the way across. A table has a few lines of extra code and doing the same thing (spanning full width)? There is a method called hybrid method that users div's with tables in outlook conditional statements. – Syfer Sep 09 '22 at 00:42
0

In my case the thing that caused the problem was flexbox. Try using position instead. I dont use inline css and it works fine without flexbox. Probably Gmail and Outlook dont support flexbox.

Anthony Thanasis
  • 46
  • 5