Как сделать длинное название фирмы для сайта и короткое для мобильной версии?
Самый простой способ, это через css<style>
	.header .logo span::before {
	  content: 'Полное название фирмы';
	}
	
	@media (max-width: 425px) {
	  .header .logo span::before {
	    content: 'ПНФ';
	  }
	}
</style>

<div class="header">
  <div class="logo">
    <span></span>
  </div>
</div>
Если полное название должно превращаться в аббревиатуру
ТрансТехСервис (прим.) -> ТТС,
не заглавные буквы обрамите спаном и скрывайте на мобилах.
В конце концов, сделайте соседний элемент, который будет показываться на мобильной и тот, который будет только на десктопе