时间戳

首页 > 解决方案 > 文本位于移动视图的第一部分下方

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

问题描述

所以我有一个完整的登陆页面，如下所示： 在此处输入图像描述

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

在此处输入图像描述

我尝试使用自定义margin-top，padding但没有一个可以很好地工作。我也尝试使用不同font-size的 like ems。我在这里想念什么？

我使用这个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/

标签： htmlcsstwitter-bootstrap

解决方案

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

贝娄是您需要的代码。

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

推荐阅读