Раздел <Div>не будет содержаться, когда размер устройства меньше

Question

Когда размер экрана моей веб-страницы указан на планшетах / мобильных устройствах, верхний разделитель выходит за пределы своего пространства и перекрывает другую часть экрана.Я использую сетки начальной загрузки, так что, возможно, я их неправильно использую?Любая помощь будет спасением жизни.

1-й снимок экрана, показывающий правильное размещение на настольном ПК

2-й снимок экрана, показывающий неправильное размещение на iPhone

    <div class="container mt-5">
    <div class="row no gutters header text-left mt-5">
        <div class="col-sm-12">
            <h1 id="testing-1" class="display-4 text-left">Digital Study Skills Tutor</h1>
            <p class="lead">Free self-help study skills resources for university students</p>
            <a class="btn btn-lg btn-primary" href="signup.php">Sign Up</a>
        </div>  
    </div>
</div>



    .site-header {
  background: url(img/home-header.jpg) no-repeat center;
  background-size: cover;
        }

.site-header .layout-hero {
  min-height: 100vh;
}

    .display-4 {
  font-size: 2.25em;
  font-weight: 500;
  color: white;
}

Answer 1

Мне не удалось создать этот сценарий, но я сделаю снимок.Вам нужно использовать медиазапрос, чтобы перекомпилировать компоненты на вашей странице, чтобы текст и кнопка не переполнялись в следующем разделе.Вам, вероятно, нужно уменьшить размер шрифта и уменьшить размеры кнопки, чтобы соответствовать размеру экрана.Продолжайте регулировать размер шрифта и размер кнопок в приведенном ниже медиа-запросе, чтобы получить желаемый результат.Медиа-запрос используется для переопределения стиля для разных размеров экрана.Это отличный способ стилизовать вашу страницу для адаптивного веб-дизайна. Медиа-запрос

Пример медиа-запроса для меньшего экрана:

@media (max-width:576px) {
  .testing-1 {
        font-size:x;
    }
   .lead {
        font-size: y;
    }
    .btn-lg .btn-primary {
        width: z;
    }
}