# Re: CSS in email

**URL:** <https://forum.mautic.org/t/re-css-in-email/9247>\
**Category:** General Discussion\
**Created:** [August 16, 2017, 7:25am UTC](https://forum.mautic.org/t/re-css-in-email/9247 "2017-08-16T07:25:47Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Geomians](https://avatars.discourse-cdn.com/v4/letter/g/258eb7/32.png) [@Geomians](https://forum.mautic.org/u/Geomians)\
**Post date:** [August 16, 2017, 7:25am UTC](https://forum.mautic.org/t/re-css-in-email/9247/1 "2017-08-16T07:25:47Z")

</div>

Hope this helps, cheers.  
  
  
  
[https://solfen.mautic.net/email/preview/5](https://solfen.mautic.net/email/preview/5)

---

<div class="post-metadata">

**Author:** ![Geomians](https://avatars.discourse-cdn.com/v4/letter/g/258eb7/32.png) [@Geomians](https://forum.mautic.org/u/Geomians)\
**Post date:** [August 16, 2017, 7:25am UTC](https://forum.mautic.org/t/re-css-in-email/9247/2 "2017-08-16T07:25:47Z")

</div>

Hope this helps, cheers.

[https://solfen.mautic.net/email/preview/5](https://solfen.mautic.net/email/preview/5)

---

<div class="post-metadata">

**Author:** ![Geomians](https://avatars.discourse-cdn.com/v4/letter/g/258eb7/32.png) [@Geomians](https://forum.mautic.org/u/Geomians)\
**Post date:** [August 16, 2017, 7:27am UTC](https://forum.mautic.org/t/re-css-in-email/9247/3 "2017-08-16T07:27:12Z")

</div>

Oh and this is the CSS that won’t go into the code mode;

```
<style type="text/css">
  /* Client-specific Styles */
  div, p, a, li, td {
    -webkit-text-size-adjust:none;
  }
  #outlook a {
    padding:0;
  }
  /* Force Outlook to provide a "view in browser" menu link. */
  html{
    width: 100%;
  }
  body{
    width:100% !important;
    -webkit-text-size-adjust:100%;
    -ms-text-size-adjust:100%;
    margin:0;
    padding:0;
    box-sizing: border-box;
  }
  /* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */
  .ExternalClass {
    width:100%;
  }
  /* Force Hotmail to display emails at full width */
  .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
    line-height: 100%;
  }
  /* Force Hotmail to display normal line spacing. */
  #backgroundTable {
    margin:0;
    padding:0;
    width:100% !important;
    line-height: 100% !important;
  }
  img {
    outline:none;
    text-decoration:none;
    border:none;
    -ms-interpolation-mode: bicubic;
  }
  a img {
    border:none;
  }
  .image_fix {
    display:block;
  }
  p {
    margin: 0px 0px !important;
  }
  table td {
    border-collapse: collapse;
  }
  table {
    border-collapse:collapse;
    mso-table-lspace:0pt;
    mso-table-rspace:0pt;
  }
  a {
    color: #33b9ff;
    text-decoration: none;
    text-decoration:none!important;
  }
  /*STYLES*/
  table[class=full] {
    width: 100%;
    clear: both;
  }
  .mobile-only {
    display: none;
  }
  /*.desktop-only {
  display: block;
  }*/			 
  @media only screen and (max-width: 767px) {
    a[href^="tel"], a[href^="sms"] {
      text-decoration: none;
      color: #33b9ff;
      /* or whatever your want */
      pointer-events: none;
      cursor: default;
    }
    .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
      text-decoration: default;
      color: #33b9ff !important;
      pointer-events: auto;
      cursor: default;
    }
    table.devicewidth {
      width: 100%;
      ;
      text-align:center!important;
      margin:0;
      padding: 0;
      box-sizing: border-box;
    }
    table.devicewidthinner {
      width: 420px!important;
      text-align:center!important;
      margin:0;
      padding: 0;
      box-sizing: border-box;
    }
    img.banner {
      width: 100%;
      height:auto!important;
      margin:0;
      padding: 0;
      box-sizing: border-box;
    }
    img.col2img {
      width: 440px!important;
      height:220px!important;
      margin:0;
      padding: 0;
      box-sizing: border-box;
    }
    table.devicewidth.mobile-social {
      width: auto !important;
    }
    table.devicewidth.mobile-logo {
      width: 140px !important;
      display: inline-block;
    }
    .mobile-text, .mobile-button {
      text-align: center !important;
      width: 440px !important;
      padding-right: 20px;
      padding-left: 20px;
      box-sizing: border-box;
    }
    .mobile-button {
      width: 100px !important;
    }
    .mobile-only {
      display: block;
    }
    .desktop-only {
      display: none;
    }
  }
  /*IPHONE STYLES*/
  @media only screen and (max-width: 480px) {
    table.devicewidth {
      width: 100%;
      text-align:center!important;
      margin:0;
      padding: 0;
      box-sizing: border-box;
    }
    table.devicewidthinner {
      width: 260px!important;
      text-align:center!important;
      margin:0;
      padding: 0;
      box-sizing: border-box;
    }
    img.col2img {
      width: 280px!important;
      height:140px!important;
      margin:0;
      padding: 0;
      box-sizing: border-box;
    }
    img.banner {
      width: 100%;
      height: auto!important;
      margin:0;
      padding: 0;
      box-sizing: border-box;
    }
  }
</style>
```

---

<div class="post-metadata">

**Author:** ![chris0928](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/chris0928/32/118_2.png) [@chris0928](https://forum.mautic.org/u/chris0928)\
**Post date:** [August 16, 2017, 10:30pm UTC](https://forum.mautic.org/t/re-css-in-email/9247/4 "2017-08-16T22:30:14Z")

</div>

There are two bullet points showing up in the extra css code when you pasted it here - perhaps that’s what’s causing the issue? When I correct those with the code below, it all worked fine for me - I could see the columns stack when I added the extra chunk of css.

`-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;`

---

<div class="post-metadata">

**Author:** ![Geomians](https://avatars.discourse-cdn.com/v4/letter/g/258eb7/32.png) [@Geomians](https://forum.mautic.org/u/Geomians)\
**Post date:** [August 17, 2017, 12:08pm UTC](https://forum.mautic.org/t/re-css-in-email/9247/5 "2017-08-17T12:08:56Z")

</div>

How weird is that? Doesn’t show in sublime. So when loaded into the code drop box on Mautic did you load the whole page or just between – and then – to-- or did you load the lot, all the head, body, etc.?

Cheers  
Geoff

---

<div class="post-metadata">

**Author:** ![chris0928](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/chris0928/32/118_2.png) [@chris0928](https://forum.mautic.org/u/chris0928)\
**Post date:** [August 17, 2017, 2:11pm UTC](https://forum.mautic.org/t/re-css-in-email/9247/6 "2017-08-17T14:11:34Z")

</div>

All of the code should be added into code mode, yup, with your css added in the head in its own style tag, just as you pasted here.