モバイル版の空白を取り除く方法

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：隠された」を適用することだったことに、それは問題を解消。