Почему при таком коде в html на ноутбуке текст по центру а на телефоне нет

Question

* {
  margin: 0;
  padding: 0;
  border: 0;
}

.first-line {
  text-align: center;
  color: white;
  font-size: 140px;
  text-shadow: 15px 15px 6px black;
}

.second-line {
  text-shadow: 15px 15px 6px black;
  color: white;
  text-align: center;
  font-size: 30px;
}

.imgone {
  margin-top: -100px;
  width: 1482px;
  height: 1000px;
  margin: 0px auto 20px;
  display: block;
}

.one {
  margin-top: -400px;
}

.three-line {
  font-size: 30px;
  text-align: center;
  margin-top: 400px;
}

<body bgcolor=''>
  <img class='imgone' src='https://avatars.mds.yandex.net/get-entity_search/2487574/434829330/orig' />
  <div class='one'>
    <h1 class='first-line'>МАНУЛ</h1>
    <h2 class='second-line'>ывмывмывмывмвмвым</h2>
  </div>
  <h2 class='three-line'>ывмывмвымвы<br>ывмвымвымыв<br>мвымывмвымвым<br></h2>
</body>

Answer 1

Почему при таком коде в html на ноутбуке текст по центру а на телефоне нет

Посмотри что я закомментировал в твоем CSS. Оно и влияло на такое поведение. В частности твои огромные размеры в пикселях у картинки.

  width: 1482px;
  height: 1000px;

* {
  margin: 0;
  padding: 0;
  border: 0;
}

.first-line {
  text-align: center;
  color: white;
  font-size: 20vw;
  text-shadow: 15px 15px 6px black;
}

.second-line {
  text-shadow: 15px 15px 6px black;
  color: white;
  text-align: center;
  /*font-size: 30px;*/
  font-size: 5.4vw;
}

.imgone {
  /*margin-top: -100px;*/
  /*display: block;*/
  /*margin: 0px auto 20px;*/
  /*height: 1000px;*/
  height: 300vh;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('https://avatars.mds.yandex.net/get-entity_search/2487574/434829330/orig');
}

.one {
  /*margin-top: -400px;*/
  margin-top: -100vh;
}

.three-line {
  /*font-size: 30px;*/
  font-size: 5.4vw;
  text-align: center;
  margin-top: 400px;
}

<body bgcolor=''>
  <div class='imgone'></div>
  <div class='one'>
    <h1 class='first-line'>МАНУЛ</h1>
    <h2 class='second-line'>ывмывмывмывмвмвым</h2>
  </div>
  <h2 class='three-line'>ывмывмвымвы<br>ывмвымвымыв<br>мвымывмвымвым<br></h2>
</body>

БЛОГ НА HUSL

Почему при таком коде в html на ноутбуке текст по центру а на телефоне нет

Ответы (1 шт):