Как сделать длинное название фирмы для сайта и короткое для мобильной версии?

Question

[sitev_ru]

Делаю простенький сайтик-визитку. Как сделать, чтобы для обычного сайта отображалось полное название фирмы, а для мобильной версии того же сайта - сокращённое?

Answer 1

[азаза]

оберните названия напр. в дивы с разными классами напр.

<div class="pc">Длинное название</div>
<div class="mob">Короткое название</div>

.pc{}
.mob{display:none;}
@media screen and (max-width: 768px){
.pc{display:none;}
.mob{display:block!important;}
}

Answer 2

[Swartex]

почитать доку https://getbootstrap.com/docs/4.0/utilities/display/

Answer 3

[Антон]

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

Answer 4

[Samuello]

Самый простой способ, это через 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>