Html 引导4容器与上一个容器重叠

我遇到了一个又一个容器与移动设备上的前一个容器重叠的问题。特别是S5或iPhoneX或更低版本的显示器尺寸。第一个容器涉及一些嵌套行和偏移列，因此它并不简单。

媒体特色包装

容器与手机上先前的

主页头

容器重叠。如果我删除

媒体特色包装器

容器，下一个元素会重叠，因此可能是第一个容器的问题，我无法确定。任何想法都将不胜感激。（这是在Modx上，因此是方括号）谢谢

---

这是分配给主页标题部分的height属性，所以我将其完全删除。它还需要更改大量的填充和边距，并使H1文本具有响应性。大量的尝试和错误，太多的调整在这里陈述，我有它的工作。谢谢

这是分配给主页标题部分的height属性，所以我将其完全删除。它还需要更改大量的填充和边距，并使H1文本具有响应性。大量的尝试和错误，太多的调整在这里陈述，我有它的工作。谢谢

你能发布正在发生的事情的截图吗？可能会帮助我们了解容器重叠的内容和方式，很可能与硬编码的

高度：630px

有关。如果没有医生，你在这里得到帮助的机会很小。另外请注意，无论您喜欢哪种前端语言/框架，浏览器都会受到HTML+CSS+JS的影响。这正是你应该提供的，因为CSS/JS/HTML专家远远多于Modx专家。很抱歉，该网站实际上是实时的，但不确定直接链接到它是否是一种好的做法。硬编码的高度是一个问题，并且从那以后一直是最小高度的变化。你能发布一个发生了什么的屏幕截图吗？可能会帮助我们了解容器重叠的内容和方式，很可能与硬编码的

高度：630px

有关。如果没有医生，你在这里得到帮助的机会很小。另外请注意，无论您喜欢哪种前端语言/框架，浏览器都会受到HTML+CSS+JS的影响。这正是你应该提供的，因为CSS/JS/HTML专家远远多于Modx专家。很抱歉，该网站实际上是实时的，但不确定直接链接到它是否是一种好的做法。硬编码的高度是问题所在，此后一直更改为最小高度。

<div class=" container-fluid px-0 homepage_header border-bottom">
    <div class="row h-100 no-gutters">
        <div class="d-none d-lg-block col-md-4 homepage_header_left">
            <div class="col-md-9 offset-md-3 pt-4 text-center">
                <picture class="img-fluid">
                    <source srcset="[[++assets_url]]hp_logo_w_text.svg" type="image/svg+xml">
                    <source srcset="[[++assets_url]]hp_logo_w_text.png" type="image/png"> 
                    <img src="[[++assets_url]]hp_logo_w_text.png" class="img-fluid my-auto" alt="">
               </picture>
            </div>
        </div>
        <div class="col-md-12 col-lg-8 homepage_header_right">
            <div class="d-none d-lg-block">
                [[pdoMenu?
                    &startId=`0`
                    &level=`2`
                    &tplOuter=`HPNav.outerTpl`
                    &tplInner=`HPNav.innerTpl`
                    &tplParentRow=`HPNav.parentRowTpl`
                    &tplInnerRow=`HPNav.innerRowTpl`
                    &tpl=`HPNav.rowTpl`
                    &fullLink=`TRUE`
                    &excludeDocs=`1`
                ]]
            </div>
            <picture class="d-block d-lg-none img-fluid mt-0">
                <source srcset="[[++assets_url]]img/hp_mobile_logo.webp" type="image/webp">
                <source srcset="[[++assets_url]]img/hp_mobile_logo.png" type="image/png"> 
                <img src="[[++assets_url]]img/hp_mobile_logo.png" class="d-block d-lg-none img-fluid mt-0" alt="Activate Body Logo">
            </picture>
            <div class="row">
                <div class="col-lg-9 col-md-10 offset-md-2 offset-lg-0">
                    <h2 class="g-highlight d-block d-lg-none">Text</h2>
                    <h2 class="highlight d-none d-lg-inline">Text</h2>
                    <h1 class="b_hp_header_text mb-5 mt-2">Text</h1>
                    <a href="#contact" class="btn btn-success btn-lg my-0 px-4 text-center" roll="button">TEXT!</a>
                 </div>
            </div>
        </div>
    </div>   
</div>

<div class="container-fluid media-featured-wrapper border-bottom">
    <div class="row">
        <div class="col-sm-12 text-center">
            <span class="sr-only">As Featured In</span>
            <ul class="list-inline media_featured text-center mx-auto" role="list">
                <li class="list-inline-item img-fluid" role="listitem"><img src="[[++assets_url]]img1.png" class="img-fluid" alt=""></li>
                <li class="list-inline-item img-fluid" role="listitem"><img src="[[++assets_url]]img2.png" class="img-fluid" alt=""></li>
                <li class="list-inline-item img-fluid" role="listitem"><img src="[[++assets_url]]img3.png" class="img-fluid" alt=""></li>
            </ul>   
        </div>
    </div>
</div>

.homepage_header {
  height: 640px;
  margin-bottom:0px;
}

.homepage_header_left {
    background-color: #005a8a;  
    background: rgba(0,112,168,1);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,112,168,1)), color-stop(50%, rgba(0,99,148,1)), color-stop(100%, rgba(0,90,138,1)));
    background: -o-linear-gradient(left, rgba(0,112,168,1) 0%, rgba(0,99,148,1) 50%, rgba(0,90,138,1) 100%);
    background: -webkit-gradient(linear, left top, right top, from(rgba(0,112,168,1)), color-stop(50%, rgba(0,99,148,1)), to(rgba(0,90,138,1)));
    background: linear-gradient(to right, rgba(0,112,168,1) 0%, rgba(0,99,148,1) 50%, rgba(0,90,138,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0070a8', endColorstr='#005a8a', GradientType=1 );   
    padding-top: 0px;
    padding-bottom: 0px;
    padding-right:20px!important;
    text-align: center;
    height: 100%;
}

.homepage_header_left img, .homepage_header_left picture {
    max-height: 585px;
}

.homepage_header_right {
    padding-top: 1rem;
    text-align: left;
    padding-right: 2rem!important;
    padding-left: 2rem!important;
    height: auto;
}
/* For Modernizer.js */
.no-webp .homepage_header_right {
    padding-top: 1rem;
    text-align: left;
    padding-right: 2rem!important;
    padding-left: 2rem!important;
    background-image: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 20%, rgba(255,255,255,0) 100%), url('../img/hp_gym_right.jpg');
    background-image: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255) 20%,rgba(255,255,255,0) 100%), url('../img/hp_gym_right.jpg');
    background-image: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255) 20%,rgba(255,255,255,0) 100%), url('../img/hp_gym_right.jpg'); 
    background-size: cover;
}

.webp .homepage_header_right {
    padding-top: 1rem;
    text-align: left;
    padding-right: 2rem!important;
    padding-left: 2rem!important;
    background-image: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 20%, rgba(255,255,255,0) 100%), url('../img/hp_gym_right.webp');
    background-image: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255) 20%,rgba(255,255,255,0) 100%), url('../img/hp_gym_right.webp');
    background-image: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255) 20%,rgba(255,255,255,0) 100%), url('../img/hp_gym_right.webp'); 
    background-size: cover;
}

.b_hp_header_text {
    font-family: 'Montserrat', arial, sans-serif;
    font-weight: 700;
    font-size: 3.5rem;
    color: #000000;
    text-transform:capitalize;
}

/*--- FEATURED MEDIA ---*/
.media-featured-wrapper {
    margin-bottom:20px;
    height:auto;
}

.media_featured ul{
    width: 100%;
    margin: 0;
    padding: .5em 0;
    color: #bfbfbf;
    font-size: .63em;
    border-spacing: 3px;
    border-collapse: separate;
}
.media_featured li img {
    max-height: 30px;
    margin: 15px 15px 0px 15px;
    vertical-align: middle;
}

.media_featured ul li {
    max-width: 200px;

}