如何在移动版摆脱空白

Question

该网站是getfarmerfit.com

除非你缩小到50％，它看起来在桌面上的版本好。然后它显示slider that's created by with jQuery右侧的空白。我已经尝试了overflow-x-hidden，但它不起作用。我试着找到一些据称在移动版本上没有缩放/缩小功能的元器件，但仍然没有成功。

任何建议都会有用。

.scroller_roll{ 
 
    padding: 0px; 
 
    margin: 0px; 
 
    clear: both; 
 
    overflow: hidden; 
 
    /*overflow-y: auto;*/ 
 
    white-space: nowrap; 
 
    align-self: center; 
 
} 
 
.scroller_roll ul{ 
 
    align-self: center; 
 
    padding: 0px; 
 
    margin: 0px; 
 
    float: left; 
 
    white-space: nowrap; 
 
    clear: both; 
 
    overflow: hidden; 
 
} 
 
.scroller_roll ul li{ 
 
    padding: 0px; 
 
    margin: 0px; 
 
    list-style: none; 
 
    align-self: center; 
 
    /*clear: both;*/ 
 
    /*text-align: center;*/ 
 
    display: inline-flex; 
 
    overflow: hidden; 
 
} 
 
.scroller_roll ul li a{ 
 
    text-decoration: none; 
 
} 
 
.scroller_roll ul li a:hover{ 
 
    text-decoration: underline; 
 
} 
 
.scroller_roll ul li a img{ 
 
    border: none; 
 
    overflow: hidden; 
 
    margin: 0px; 
 
}

<!-- Slide Show --> 
 

 
<!-- <div id=="tech-slideshow"> 
 
\t <div class="tech-slideshow"> 
 
    \t \t <div class="mover-1"></div> 
 
    \t \t <div class="mover-2"></div> 
 
\t </div> 
 
</div> --> 
 
<div id="scroller_roll1" class="scroller_roll"> 
 
    <ul> 
 
     <li><img src="img/resources/css_slider_images/elaine_dips.jpg" width="300" height="300" alt="Farmer Fitness"/></li> 
 
     <li><img src="img/resources/css_slider_images/fierce_randy.jpg" width="300" height="300" alt="Farmer Fitness"/></li> 
 
     <li><img src="img/resources/css_slider_images/janette_swings.jpg" width="300" height="300" alt="Farmer Fitness"/></li> 
 
     <li><img src="img/resources/css_slider_images/johany_back.jpg" width="300" height="300" alt="Farmer Fitness"/></li> 
 
     <li><img src="img/resources/css_slider_images/jose_pushdowns.jpg" width="300" height="300" alt="Farmer Fitness"/></li> 
 
     <li><img src="img/resources/css_slider_images/large_group.jpg" width="300" height="300" alt="Farmer Fitness"/></li> 
 
     <li><img src="img/resources/css_slider_images/leah_flys.jpg" width="300" height="300" alt="Farmer Fitness"/></li> 
 
     <li><img src="img/resources/css_slider_images/randy_sled.jpg" width="300" height="300" alt="Farmer Fitness"/></li> 
 
     <li><img src="img/resources/css_slider_images/shoulder_press.jpg" width="300" height="300" alt="Farmer Fitness"/></li> 
 
     <li><img src="img/resources/css_slider_images/steven_pullups.jpg" width="300" height="300" alt="Farmer Fitness"/></li> 
 
     <li><img src="img/resources/css_slider_images/leah_leg_out.jpg" width="300" height="300" alt="Farmer Fitness"/></li> 
 
     <li><img src="img/resources/css_slider_images/renegade_row_girls.jpg" width="300" height="300" alt="Farmer Fitness"/></li> 
 
     <li><img src="img/resources/css_slider_images/side_plank.jpg" width="300" height="300" alt="Farmer Fitness"/></li> 
 
     <li><img src="img/resources/css_slider_images/leah_guns.jpg" width="300" height="300" alt="Farmer Fitness"/></li> 
 
     <li><img src="img/resources/css_slider_images/three_ladies.jpg" width="300" height="300" alt="Farmer Fitness"/></li> 
 
     <li><img src="img/resources/css_slider_images/woman_pushups.jpg" width="300" height="300" alt="Farmer Fitness"/></li> 
 
    </ul> 
 
    <div style="clear: both"></div> 
 
</div> 
 

 
<!-- Slide Show Ends -->

Answer 1

对我来说，解决办法是包装在另一个DIV的滚动条和应用“溢出-X：隐藏”来表示，它消除了问题。