.webchat-banner {
  background-color: $govuk-blue;
  color: $white;
  @include core-19;
  max-height: 0;
  padding: 0 $gutter-half;
  opacity: 0;
  margin-bottom: 0;
  overflow: hidden;
  -webkit-transition: .7s ease-out;
  -webkit-transition-property: max-height, opacity, margin-bottom, padding-top, padding-bottom;
  transition: .7s ease-out;
  transition-property: max-height, opacity, margin-bottom, padding-top, padding-bottom;
}

.webchat-banner.open {
  max-height: 200px;
  padding-top: $gutter-half;
  padding-bottom: $gutter-half;
  margin-bottom: $gutter;
  opacity: 1;
}

.webchat-banner h2 {
  margin-top: 0;
}

.webchat-banner a {
  color: $white;
  @include bold-19;
}

.webchat-banner .reject {
  margin-left: 1em;
}

.webchat-banner {
  background-color: $govuk-blue;
  color: $white;
  @include core-19;
  max-height: 0;
  padding: 0 $gutter-half;
  opacity: 0;
  margin-bottom: 0;
  overflow: hidden;
  -webkit-transition: .7s ease-out;
  -webkit-transition-property: max-height, opacity, margin-bottom, padding-top, padding-bottom;
  transition: .7s ease-out;
  transition-property: max-height, opacity, margin-bottom, padding-top, padding-bottom;
}

.webchat-banner.open {
  max-height: 200px;
  padding-top: $gutter-half;
  padding-bottom: $gutter-half;
  margin-bottom: $gutter;
  opacity: 1;
}

.webchat-banner h2:first-child {
  margin-top: 0;
}

.webchat-banner a {
  color: $white;
  @include bold-19;
}

.webchat-banner .reject {
  margin-left: 1em;
}

Fix padding in the mobile view of the web chat
Fix padding in the mobile view of the web chat

.contact-show h2 was setting a margin with the same specificity that, because it’s defined in the app instead of static, was overriding the styles we’re setting. By setting a :first-child pseudo class.