我有一个html网站，在其中我减小了滑块的大小，然后添加了一个部分，并使用媒体查询将其与移动设备对齐。在桌面视图中完全可以，但是在某些移动设备中，这些部分与横幅部分重叠，并且会导致对齐问题：
<section>
<div style="height: 300px;" class="ulockd-home-slider">
<div class="container-fluid">
<div class="row">
<div class="pogoSlider" id="js-main-slider">
<div class="pogoSlider-slide" data-transition="zipReveal" data-duration="1500" style="background-image:url(images/home/h4.jpg); height: 300px;">
<div class="lbox-caption">
<div class="lbox-details">
<h1 class="fz45">Couple Heart Wedding Planner</h1>
<h3 class="fz40 ulockd-mrgn120 ff-raleway">Best Event Organizer.</h3>
<button class="btn ulockd-btn-thm2">Get Quote <span class="fa fa-angle-double-right"></span> </button>
<button class="btn btn-default ulockd-btn-transparent">More Info <span class="fa fa-angle-double-right"></span></button>
</div>
</div>
</div>
<div class="pogoSlider-slide" data-transition="blocksReveal" data-duration="1500" style="background-image:url(images/home/h5a.jpg); height: 300px;">
<div class="lbox-caption">
<div class="lbox-details">
<h1 class="fz45">We Are Creative Agency.</h1>
<h2 class="ff-raleway">Your Dream Comes Out True.</h2>
<button class="btn btn-default ulockd-btn-thm2">More Info </button>
<button class="btn btn-default ulockd-btn-transparent">Contact Us </button>
</div>
</div>
</div>
<div class="pogoSlider-slide" data-transition="shrinkReveal" data-duration="2000" style="background-image:url(images/home/h4a.jpg); height: 300px;">
<div class="lbox-caption">
<div class="lbox-details">
<h2 class="fz48">Best Wedding Planner</h2>
<h1 class="ff-raleway">We Organize Your Any Event</h1>
<button class="btn btn-default ulockd-btn-thm2">Get Quote </button>
</div>
</div>
</div>
</div>
<!-- .pogoSlider -->
</div>
</div>
</div>
</section>
<section class="iconss" style="height:250px;background-color: #F5F5F5 ">
<div>
<div class="container">
<div style="margin-top: -35px; margin-left: 5px;" class="row">
<table>
<tr>
........
有什么方法可以阻止这种情况，这两个部分在某些设备中发生了冲突。预先感谢