Как правильно масштабировать мобильную страницу? - PullRequest
Новая
       9

Как правильно масштабировать мобильную страницу?

0 голосов
/ 24 мая 2019

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

Есть идеи?

Добавлена ​​ширина области просмотра = ширина устройства и начальный отступ к голове, ничего не изменилось.

HTML 

<header id="header">
  <div class="intro">
    <div class="overlay">
      <div class="container">
        <div class="row">
          <div class="col-md-8 col-md-offset-0 intro-text">
            <h1>IRON LANDSCAPING</h1>
            <p>Bringing your home the best.</p>
            <a href="#about" class="btn btn-custom btn-lg page-scroll">More Info</a> </div>
        </div>
      </div>
    </div>
  </div>
</header>
<!-- About Section -->

CSS 

.intro {
    display: inline;
    width: 100%;
    padding: 0;
    background: url(../img/intro-bg.jpg) top center no-repeat;
    background-color: #808080;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;

Снимок экрана

screenshot

Ответы [ 2 ]

0 голосов
/ 24 мая 2019

Попробуйте уменьшить размер шрифта заголовка, он выталкивает другой контент.у вас есть это в вашем css .intro h1 {font-size: 100px;} которая вызывает вашу проблему Добавьте эту строку в конце вашего CSS, чтобы сделать медиа-запрос для экранов шириной менее 800 пикселей. 

@media only screen and (max-width: 799px) {
  .intro h1 {
    font-size: 36px;
  }
}
0 голосов
/ 24 мая 2019

Не забудьте добавить это к вашему <Head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
...