Question

所以我有一个完整的登陆页面，如下所示：

看起来很棒，问题是当我进入移动视图时，标题下的文字＆＃34;你好那里＆＃34;属于第一部分。

我尝试使用自定义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的高度设置为自动，如果您希望min-height为100vh。

Bellow是您需要的代码。

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

文字属于移动视图的第一部分

1 个答案: