CSS properties not appearing in email

Question

In my spree store, I am preparing mailer to send email on order confirmation, but CSS property: justify-content is not appearing in the email rendered.

Following is my HTML:

  <div class="banner">
    <img class="height-50perc banner-content" src="https://myUrl" />
    <span class="banner-content">Order confirmed</span>
  </div>

My CSS:

.banner {
  display: flex;
  height: 80px;
  background: linear-gradient(90deg, #2e3092 , #0c5fdc);
  justify-content: space-between;
}

.banner-content {
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 10px;
  margin-right: 10px;
  color: white;
  font-size: 20px;
}

But in email rendered, I don't see property: justify-content. When I inspect corresponding element: it is like this:

<div class="m_2586726072602943149banner" style="background:linear-gradient(90deg,#2e3092,#0c5fdc);display:flex;height:80px">
    ....
</div>

Notice there is no justify-content in this div. I am viewing email in chrome and firefox browser in Mac.

I have also tried changing CSS to:

.banner {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 80px;
  background: linear-gradient(90deg, #2e3092 , #0c5fdc);
  justify-content: space-between;
  -webkit-justify-content: space-between;
}

But this also did not help.

If you are attaching any css files, then it won't work. Try adding the property inline. — Aslam, Feb 22 '17 at 10:41
@hunzaboy Tried both ways, actually spree takes care of CSS files, thats why other properties are coming, but tried giving this as inline as well. didn't work. — Saurabh, Feb 22 '17 at 10:44
possible duplicate: [**Flex-box properties are deleted in gmail email**](http://stackoverflow.com/q/39376710/3597276) — Michael Benjamin, Feb 22 '17 at 13:07

score 2 · Answer 1 · edited Jun 20 '20 at 09:12

2

It seems support of flex is still not proper as explained in this link

Now here are the webmails in which Flexbox is not supported :

Yahoo

Gmail

Outlook.com

Gmail and Outlook.com also filter every properties related to Flexbox, except the property display:flex.

This may be the reason why I am not even able to see the justify-content in rendered email.

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 22 '17 at 11:00

Saurabh

71,488
40
181
244

score 0 · Answer 2 · answered May 22 '23 at 08:43

For future reference not all CSS reference is supported in E-mail providers, which is causing such error, each email provider has their own style and support.

You can find the full support list for Gmail from this link:

and the other emails from the mailchimp

CSS properties not appearing in email

2 Answers2