У меня проблема, когда контейнер, помещенный за другим, перекрывает предыдущий контейнер на мобильном устройстве. В частности, монитор размером с S5 или iPhoneX или ниже. Первый контейнер включает несколько вложенных строк и смещенных столбцов, поэтому он не прост. Контейнер media-featured-wrapper перекрывает предыдущий контейнер homepage_header на мобильном устройстве. Если я удаляю контейнер media-featured-wrapper, следующий элемент перекрывается, так что это, вероятно, проблема с первым контейнером, который я не могу выяснить. Любые идеи были бы хорошы. (Это на 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>
Похожие CSS
.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;
}