Re: CSS in email

General Discussion
1

Hope this helps, cheers.



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

2

Hope this helps, cheers.

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

3

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>
4

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

5

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

6

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.