Mautic Community Forums

Re: CSS in email

Hope this helps, cheers.



https://solfen.mautic.net/email/preview/5

Hope this helps, cheers.

https://solfen.mautic.net/email/preview/5

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>

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%;

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

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.