Почему мой веб-сайт не реагирует после использования всей платформы bootstrap 4 - PullRequest
Новая
       18

Почему мой веб-сайт не реагирует после использования всей платформы bootstrap 4

0 голосов
/ 27 февраля 2019

Итак, я разработал веб-сайт для компании, использующей Bootstrap 4 в качестве фреймворка.Поработав над созданием адаптивного веб-сайта с самого начала, я совершенно сбит с толку тем, почему на всех устройствах имеется огромный белый разрыв (размер зависит от размера устройства).

Даже удаление частейкод, который я думал, был проблемой (навигационная панель).Все равно не повезло, после удаления каждого элемента сайта попытаться определить причину проблемы.Не повезло

Я загрузил сайт на один из моих веб-серверов по адресу www.adameastwood.co.uk / eg / index.html Игнорировать медленное время откликаМне дали изображения с очень высоким разрешением, но я так и не решил проблему кэширования.

HTML панели навигации и заголовка: 

  <!-- Navigation Look into as responsive is broken -->
  <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
    <div class="container">
      <img class=" js-scroll-trigger img-fluid paddingLogo" src="img/logo.png" href="#page-top"></img>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav text-uppercase ml-auto">
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#About">Warum PPG</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#Advantages">Vorteile & Merkmale</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#Purchase">Kaufen</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#contact">Kontakt</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Header -->
  <header class="masthead mainImg">
    <div class="container">
      <div class="intro-text">
        <div class="intro-heading ">Willkommen bei</div>
        <div class="intro-lead-in">PowerPerformance Gloves</div>
        <!-- <a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#services">Tell Me More</a> -->
      </div>
    </div>
  </header>

Не думаю, что нижний колонтитул или заголовок являются источникомпроблема, но это отправная точка.Спасибо за любую помощь:)

Изображение проблемы Iphone X res, белая полоса справа

1 Ответ

0 голосов
/ 27 февраля 2019

Кажется, что контактная секция вызывает белый разрыв.Заголовок широкий.Вы можете уменьшить его длину, размер шрифта или применить к нему многоточие.

Попробуйте это: 

#contact .section-heading {
    text-overflow: ellipsis;
    overflow: hidden;
}

или это: 

#contact .section-heading {
    font-size: 25px;
}

, и вы увидитебелого разрыва справа больше не должно быть.

...