如何在移動版擺脫空白

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：隱藏」來表示，它消除了問題。