@AFI19

Почему блок не занимает 100% ширины при загрузке страницы?

Есть простой preloader, проблема в том что при загрузке страницы на моб. устройствах блок занимает больше 100% из за чего выглядит криво. Происходит это в первые секунды закгрузки после все блок принимает 100%. Из за чего это возникает и как исправить?
.b-preloader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background: $white;
  text-align: center;
  overflow: hidden;
  &::before {
    content: 'Загрузка . . .';
    position: absolute;
    z-index: 1001;
    top: calc(50% + 20px);
    left: 0;
    right: 0;
    width: 150px;
    text-align: center;
    margin: auto;
    padding-left: 25px;
    }
  &::after {
    content: '';
    position: absolute;
    z-index: 1001;
    top: calc(50% - 15px);
    left: calc(50% - 15px);
    height: 30px;
    width: 30px;
    border: 5px solid rgba(60, 60, 180, 0.45);
    border-top: 5px solid rgb(60, 60, 180);
    border-radius: 30px;
    animation: rotate 1s infinite linear;
  }

  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
}
  • Вопрос задан
  • 228 просмотров
Пригласить эксперта
Ответы на вопрос 2
@sv1979
Front-end developer
Try: width: 100vw; height: 100vh; max-width: 100vw; max-height:100vh;
Ответ написан
Комментировать
AskMy
@AskMy
иногда решаю задачки и задаю глупые вопросы
не видно в css вот это :
margin:0;
padding:0;
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы