<header>
  <h1 class='logo'>Logo here</h1>
  <div id='phoneNumberBox'> 
      Call me: <a href='tel:+1 xxx-xxxxxx'>+1 012-3456780</a>
  </div>
</header>

header {
  width: 100%;
  height: 120px;
  padding: 20px;
  background-color: #333;
  font-family: Arial, sans-serif;
  color: white;
}

header .logo {
  color: yellow;
}

a {
  text-decoration: none;
  color: yellow;
}

#phoneNumberBox {
  transition: opacity .5s linear;
}

.hide {
  visibility: hidden;
  opacity: 0;
}

const mediaQueryHandler = function(mediaQueryList) {
    document
        .querySelector('#phoneNumberBox')
        .classList.toggle('hide', mediaQueryList.matches)
}

const mediaQueryList = window.matchMedia('(max-width: 850px)');

mediaQueryList.addEventListener('change', mediaQueryHandler)
mediaQueryHandler(mediaQueryList)