在移动设备上 header 以下额外 space

Question

https://codepen.io/Religion/pen/VwvNwRy 这就是源代码。当我在桌面上时，网站看起来不错，间距看起来不错，但在移动设备上显示时，相同的代码在 header 和页面其余部分的 title/start 之间变得非常间隔。想知道我必须怎样才能让它在移动设备上看起来一样。

HTML:

<div class = "header-container">
        <div class = "video-container">
            <video preload = "true" autoplay = "autoplay" loop = "loop" muted = "muted" >
                <source src="https://d9nqqwcssctr8.cloudfront.net/wp-content/uploads/2020/03/26054225/VS20-DotCom-Header.mp4.mp4" type="video/mp4"/>
                    <source src="https://d9nqqwcssctr8.cloudfront.net/wp-content/uploads/2020/03/26054238/VS20-DotCom-Header.webmhd.webm" type="video/webm"/>


            </video>
        </div>
        <div class = "head-section">
            <h2 class = "head-title">Ejad worship</h2>
            <a href="#" class="button btn1">Get to Know us better!</a>
        </div>   
    </div>

    <div class="about_area">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-xl-5 col-md-6">
                    <div class="about_thumb">
                        <img class="img-fluid" src="{% static 'website/img/about/rsz_15.png' %}" alt="">
                    </div>
                </div>
                <div class="col-xl-7 col-md-6">
                    <div class="about_info">
                        <h3>Part thats extra spaced</h3>
                        <p>Hey! We are glad you are here, visiting our website. </p>
                        <div class="signature">
                            <img src="{% static 'website/img/about/signature.png' %}" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

CSS:

.header-container{
  width:100%;
  height:900px;
  border-left:none;
  border-right:none;
  position:relative;
  padding:20px;
}


.video-container{
  position:absolute;
  top:0%;
  left:0%;
  height:100%;
  width:100%;
  overflow:hidden;
  z-index:-1;
}

video{
  position:absolute;
  z-index:-1;
  opacity:0.78;
  width:100%;

}

.head-section {

  z-index:1;
  text-align:center;
  margin-right:auto;
  margin-left:auto;
  margin-top:15%;





}


.head-title {
  color:white;
   letter-spacing:3px;
  font-size:50px;
  font-family: "Josefin Sans", sans-serif;

}
.btn1 {
  border-radius: 50%;
}

.button {
    z-index:1;
    padding: 0.5em 10em;
    text-decoration: none;
    color: white;
    border: double 4px white;
    border-radius: 3px;
    transition: .4s;
    margin-bottom:-30;
}
.button:hover {
    background:white;
    opacity:50%;
}
.about_area {
  padding-bottom: 120px;

}

Answer 1

主要问题是 video 对象，它根据纵横比自行调整，因此您必须摆脱其宽度并将适当的高度调整为 header-container

请参阅下面的演示，它应该也适用于桌面和移动设备 - 如果您只想限制移动设备中的代码，您可以使用媒体查询

.header-container{
  width:100%;
  height:900px;
  border-left:none;
  border-right:none;
  position:relative;
  padding:20px;
}


.video-container{
  position:absolute;
  top:0%;
  left:0%;
  height:100%;
  width:100%;
  overflow:hidden;
  z-index:-1;
}

video{
  position:absolute;
  z-index:-1;
  opacity:0.78;
  width:100%;

}

.head-section {
  
  z-index:1;
  text-align:center;
  margin-right:auto;
  margin-left:auto;
  margin-top:15%;
  
  
 
 

}


.head-title {
  color:white;
   letter-spacing:3px;
  font-size:50px;
  font-family: "Josefin Sans", sans-serif;

}
.btn1 {
  border-radius: 50%;
}

.button {
    z-index:1;
    padding: 0.5em 10em;
    text-decoration: none;
    color: white;
    border: double 4px white;
    border-radius: 3px;
    transition: .4s;
    margin-bottom:-30;
}
.button:hover {
    background:white;
    opacity:50%;
}
.about_area {
  padding-bottom: 120px;
  
}


/* updated code */
body {
    margin: 0;
}

.button {
    padding: 10px 30px;
}

video {
    width: auto;
}

.header-container {
    height: 100vh;
    padding: 20px 0;
}
.head-section{
    margin-bottom: 15%;
 }

<div class = "header-container">
        <div class = "video-container">
            <video preload = "true" autoplay = "autoplay" loop = "loop" muted = "muted" >
                <source src="https://d9nqqwcssctr8.cloudfront.net/wp-content/uploads/2020/03/26054225/VS20-DotCom-Header.mp4.mp4" type="video/mp4"/>
                    <source src="https://d9nqqwcssctr8.cloudfront.net/wp-content/uploads/2020/03/26054238/VS20-DotCom-Header.webmhd.webm" type="video/webm"/>
                        

            </video>
        </div>
        <div class = "head-section">
            <h2 class = "head-title">Ejad worship</h2>
            <a href="#" class="button btn1">Get to Know us better!</a>
        </div>   
    </div>
    
    <div class="about_area">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-xl-5 col-md-6">
                    <div class="about_thumb">
                        <img class="img-fluid" src="{% static 'website/img/about/rsz_15.png' %}" alt="">
                    </div>
                </div>
                <div class="col-xl-7 col-md-6">
                    <div class="about_info">
                        <h3>Ejad Worship</h3>
                        <p>This title and paragraph extra spaced on mobile</p>
                        <div class="signature">
                            <img src="{% static 'website/img/about/signature.png' %}" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

在移动设备上 header 以下额外 space

Extra space below header on mobile

html

css

header

spacing