html - 文本位于移动 View 的第一部分下方

Question

所以我有一个完整的着陆页，如下所示:

看起来不错，问题是当我继续移动 View 时，标题“Hello there”下的文本位于第一部分下方。

我尝试使用自定义 margin-top 和 padding 但没有一个效果很好。我还尝试使用不同的 font-size，例如 em。我在这里错过了什么？

我使用这个 CSS 创建了着陆页:

body {
    margin: 0;
    overflow-x: hidden;
}
.secone {
   background-image: url(../img/woman.jpg);
   background-size:cover;
   background-position: center;
   height: 100vh;
}
.elementone {
   height: 100%;
   color: white;
   text-shadow: 1.8px 1.8px black;

   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

还有这个 HTML:

<div class="secone">
<!-- Navbar -->
<nav class="navbar navbar-expand navbar-light fadeAnim">
    <div class="container-fluid">

        <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
                <a class="nav-link" href="index.html">
                    <i class="material-icons md-36">shopping_cart</i>
                    <span class="sr-only">(current)</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="catalog.html">
                    <i class="material-icons md-36">search</i>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#menu-toggle" id="menu-toggle">
                    <i class="material-icons md-36">menu</i>
                </a>
            </li>
        </ul>

    </div>
</nav>

<!-- Sidebar -->
<div id="sidebar-wrapper">
    <ul class="sidebar-nav">
        <li class="sidebar-brand">
            <a href="https://www.google.com/">
                <img src="img/logo.png" class="img-fluid" alt="Responsive logo sidebar image">
            </a>
        </li>
        <li>
            <a href="events.html">Events</a>
        </li>
        <li>
            <a href="blogs.html">Blogs</a>
        </li>
        <li>
            <a href="aboutus.html">About Us</a>
        </li>
        <li>
            <a href="contact.html">Get in Touch</a>
        </li>
        <li>
            <a href="#">Contribute</a>
        </li>
        <li>
            <a href="catalog.html">Catalog</a>
        </li>
    </ul>
</div>

<!-- Section one - -->
<div class="container-fluid elementone fadeAnim">
    <div class="container">
        <div class="row">
            <div class="col-xl-7 col-lg-6 col-md-6 homeimage">
                <img src="img/bigbigmedium.png" class="img-fluid" alt="Responsive image">
            </div>
            <div class="col-xl-5 col-lg-6 col-md-6 justify-content-center align-self-center homeinfo">
                <span id="hometitle"> Sam Theme </span>
                <span id="homeinfotext">
                    <br> Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima fuga amet, placeat illum
                    temporibus dignissimos exercitationem eius necessitatibus kraj. </span>
            </div>
        </div>
    </div>
</div>

这是 jsfiddle 上的完整页面:https://jsfiddle.net/prozik/km1c1ms8/

Answer 1

您可以使用 css 媒体查询将移动设备上所需 div 的高度设置为自动，如果您希望将最小高度设置为 100vh。

下面是您需要的代码。

  /* On screens that are 400px or less*/
        @media screen and (max-width: 400px) {
          .secone {
            min-height:100vh;
            height: auto;
           }
        }