平板电脑宽度中滑块导航的定位问题

Question

我正在this website完成工作，并尝试完成滑块导航的定位;但是，我很难在大约平板电脑宽度屏幕（550px-768px）上获得正确的位置。

我认为我的媒体查询和大小调整有些问题，但我无法理解为什么我无法锁定该范围之间的位置！

这是a link to the correct behavior。有什么想法吗？

滑块使用Cycle2，如果重要的话！

示例HTML

<div id="slider" class="cycle-slideshow" data-cycle-pager="#adv-custom-pager" data-cycle-slides="> div" data-cycle-timeout="7000">

<div class="singleSlide">
<!-- content goes in here -->
</div>

<div id="sliderNav">

<div id="adv-custom-pager">
    <span class=""></span>
    <span class=""></span>
    <span class=""></span>
</div>

</div>

和CSS

@media screen and (max-width: 768px) and (min-width: 550px) {
     #sliderNav {
     bottom:145px;
     }

     .slidercaption {
     height:250px;
     }
}

Answer 1

此时我无法看到滑块有什么问题。

老实说，当我向网站添加一个滑块时，我通常会将其关闭为手机，并且只有一个图像可见（打破文本）。观点是如此之小，当他们可能正在阅读其他内容并注意到它发生变化时，人们不会等待观看滑块的变化，而不像台式机。