我创建了许多媒体查询，以便标题文本以更大的设备宽度扩展。但是，当屏幕高度较小时，我开始注意到底部文本与主要文本重叠。如何阻止它重叠？
请访问我正在使用的网站，并尝试调整窗口的高度：sarahtenkov.com
我尝试添加行高，display：block，margin和padding。它仍然重叠！
此代码可能还不够，但是请随时检查我的网站
HTML：
<section id="hero" class="hero u-full-width" style="padding-top: 0px;padding-bottom: 50px;">
<div id="wrapper">
<div id="featured">
<video autoplay="" muted="" loop="" playsinline="" preload="auto" width="100%" height="100%" id="homeVideo" preload="metadata">
<source src="photo/homevideo.mp4#t=1" type="video/mp4">
</video>
</div>
</div>
<div data-sr class="overlay">
<div class="row">
<h1 class="ligature offset-by-two eight columns">
SARAHTENKOV
</h1>
<h2 id="mantra" style="font-size: calc(1em + 1vw); margin-top: 5%;">
Documenting memories in motion
</h2>
</div>
</div>
</section>
CSS：
/*-----------------------------------Video responsive to fit entire height + width-------------------------------------*/
#wrapper {
position: relative;
height: 100vh;
overflow: hidden;
}
#featured {
position: absolute;
width: calc(100vh * (1000 / 562));
/* video width / height */
height: calc(100vw * (562 / 1000));
/* video height / width */
min-width: 100%;
min-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
video {
position: fixed;
top: 0;
z-index: -999;
min-width: 100%;
}
/*----------------------------------------------------------max-width:400px;-------------------------------------*/
/* Extra small devices (phones, 400px and down) */
@media only screen and (min-width: 300px) {
.overlay {
z-index: 1;
position: absolute;
left: 0%;
width: 100%;
height: 100%;
top: 30%;
}
/* Title Font */
h1 {
font-family: 'Recoleta';
font-weight: 800;
color: white;
font-size: 2.4em;
}
#mantra {
width: 50%;
height: 50%;
padding-top: 5px;
position: absolute;
left: 25%;
width: 50%;
height: 50%;
top: 15%;
}
#featured {
position: absolute;
width: calc(100vh * (1000 / 562));
/* video width / height */
height: calc(100vw * (750 / 1000));
/* video height / width */
min-width: 100%;
min-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
/*----------------------------------------------------------max-width:600px;-------------------------------------*/
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
.overlay {
z-index: 1;
position: absolute;
left: 0%;
width: 100%;
height: 100%;
top: 30%;
}
/* Title Font */
h1 {
font-family: 'Recoleta';
font-weight: 800;
color: white;
font-size: 2.7em;
}
#mantra {
width: 50%;
height: 50%;
padding-top: 5px;
position: absolute;
left: 25%;
width: 50%;
height: 50%;
top: 15.5%;
}
#featured {
position: absolute;
width: calc(100vh * (1000 / 562));
/* video width / height */
height: calc(100vw * (750 / 1000));
/* video height / width */
min-width: 100%;
min-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
/*----------------------------------------------------------min-width:600px;-------------------------------------*/
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
.overlay {
z-index: 1;
position: absolute;
left: 0%;
width: 100%;
height: 100%;
top: 30%;
}
/* Title Font */
h1 {
font-family: 'Recoleta';
font-weight: 800;
color: white;
font-size: 2.7em;
position: absolute;
top: -5%;
}
#mantra {
width: 60%;
height: 50%;
padding-top: 5px;
position: absolute;
left: 25%;
width: 50%;
height: 50%;
top: 18%;
}
#featured {
position: absolute;
width: calc(100vh * (1000 / 562));
/* video width / height */
height: calc(100vw * (750 / 1000));
/* video height / width */
min-width: 100%;
min-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
/*----------------------------------------------------------min-width:768px;-------------------------------------*/
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
.overlay {
z-index: 1;
position: absolute;
left: 0%;
width: 100%;
height: 100%;
top: 30%;
}
/* Title Font */
h1 {
font-family: 'Recoleta';
font-weight: 800;
color: white;
font-size: 4.5em;
position: absolute;
top: -5%;
}
#mantra {
width: 50%;
height: 50%;
padding-top: 5px;
position: absolute;
left: 25%;
width: 50%;
height: 50%;
top: 14%;
}
#featured {
position: absolute;
width: calc(100vh * (1000 / 562));
/* video width / height */
height: calc(100vw * (750 / 1000));
/* video height / width */
min-width: 100%;
min-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
/*----------------------------------------------------------min-width:992px;-------------------------------------*/
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
.overlay {
z-index: 1;
position: absolute;
left: 0%;
width: 100%;
height: 100%;
top: 30%;
}
/* Title Font */
h1 {
font-family: 'Recoleta';
font-weight: 800;
color: white;
font-size: 6em;
position: absolute;
top: -5%;
}
#mantra {
width: 50%;
height: 50%;
padding-top: 5px;
position: absolute;
left: 25%;
width: 50%;
height: 50%;
top: 25%;
}
#featured {
position: absolute;
width: calc(100vh * (1000 / 562));
/* video width / height */
height: calc(100vw * (750 / 1000));
/* video height / width */
min-width: 100%;
min-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
/*----------------------------------------------------------min-width:1200px;-------------------------------------*/
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
.overlay {
z-index: 1;
position: absolute;
left: 0%;
width: 100%;
height: 100%;
top: 30%;
}
/* Title Font */
h1 {
font-family: 'Recoleta';
font-weight: 800;
color: white;
font-size: 7em;
position: absolute;
top: -5%;
}
#mantra {
width: 50%;
height: 50%;
padding-top: 5px;
position: absolute;
left: 25%;
width: 50%;
height: 50%;
top: 25%;
}
#featured {
position: absolute;
width: calc(100vh * (1000 / 562));
/* video width / height */
height: calc(100vw * (750 / 1000));
/* video height / width */
min-width: 100%;
min-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
/*----------------------------------------------------------min-width:1300px;-------------------------------------*/
/* Extra large devices (large laptops and desktops, 1300px and up) */
@media only screen and (min-width: 1300px) {
.overlay {
z-index: 1;
position: absolute;
left: 0%;
width: 100%;
height: 100%;
top: 30%;
}
/* Title Font */
h1 {
font-family: 'Recoleta';
font-weight: 800;
color: white;
font-size: 8em;
position: absolute;
top: -5%;
}
#mantra {
width: 50%;
height: 50%;
position: absolute;
left: 25%;
top: 26%;
}
#featured {
position: absolute;
width: calc(100vh * (1000 / 562));
/* video width / height */
height: calc(100vw * (750 / 1000));
/* video height / width */
min-width: 100%;
min-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
/*----------------------------------------------------------min-width:1600px;-------------------------------------*/
/* Extra large devices (large laptops and desktops, 1600px and up) */
@media only screen and (min-width: 1600px) {
.overlay {
z-index: 1;
position: absolute;
left: 0%;
width: 100%;
height: 100%;
top: 30%;
}
/* Title Font */
h1 {
font-family: 'Recoleta';
font-weight: 800;
color: white;
font-size: 8em;
position: absolute;
top: -1%;
}
#mantra {
width: 50%;
height: 50%;
position: absolute;
left: 25%;
top: 20%;
}
#featured {
position: absolute;
width: calc(100vh * (1000 / 562));
/* video width / height */
height: calc(100vw * (750 / 1000));
/* video height / width */
min-width: 100%;
min-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}