Menu icon Foundation
Line Height in Buttons Fixed (Outlook of Course

Some of my buttons have too much text that's for sure. I have discovered that outlook treats each wrapped line as a block and applies the anchor padding to it separately. The result is massive line height that looks like line-height but isn't. Still no rounded corners of course

I have moved the padding to the previous TD and this seems to fix the issue.

I created a button mixin so I could colour the button more easily on different global brands but this code is the same as _button.scss

 table {
      td {
        text-align: left;
        color: $button-color;
        background: $button-background;
        border: $button-border;
        padding: map-get($button-padding, default); //New Padding Position
        a {
          font-family: $body-font-family;
          font-size: map-get($button-font-size, default);
          font-weight: $button-font-weight;
          color: $button-color;
          text-decoration: none;
          display: inline-block;
          padding: 0;// map-get($button-padding, default);
          border: 0 solid $button-background;
          border-radius: $button-radius;
          }
        }

 

 

Outlook line heightbuttons

Some of my buttons have too much text that's for sure. I have discovered that outlook treats each wrapped line as a block and applies the anchor padding to it separately. The result is massive line height that looks like line-height but isn't. Still no rounded corners of course

I have moved the padding to the previous TD and this seems to fix the issue.

I created a button mixin so I could colour the button more easily on different global brands but this code is the same as _button.scss

 table {
      td {
        text-align: left;
        color: $button-color;
        background: $button-background;
        border: $button-border;
        padding: map-get($button-padding, default); //New Padding Position
        a {
          font-family: $body-font-family;
          font-size: map-get($button-font-size, default);
          font-weight: $button-font-weight;
          color: $button-color;
          text-decoration: none;
          display: inline-block;
          padding: 0;// map-get($button-padding, default);
          border: 0 solid $button-background;
          border-radius: $button-radius;
          }
        }