使用移動設備時隱藏blueimp指示燈？

Question

對於我的網站畫廊，我使用Twitter Bootstrap和blueimp畫廊。它工作正常，但我需要改變指標的大小，因爲我不想要像blueimp gallery標準版本那樣的小圈子。

那是什麼它通常是這樣的：

而這就是我的版本：

所以你看，指標越大我的版本。我喜歡這樣，因爲你可以更好地觀看我的畫廊中的所有圖片。

但現在的問題：

乳清我打開我的畫廊在移動設備上，該指標是大..就以這個例子來看看：

現在我想通過媒體查詢來改變這樣的：

@media(max-width:768px) { 
    .blueimp-gallery>.indicator>li { 
     width: 10px !important; 
     height: 10px !important; 
    } 
} 
@media(max-width:992px) { 
    .blueimp-gallery>.indicator>li { 
     width: 10px !important; 
     height: 10px !important; 
    } 
} 

或本：

@media(max-width:768px) { 
    .blueimp-gallery>.indicator>li { 
     display: none !important; 
    } 
} 
@media(max-width:992px) { 
    .blueimp-gallery>.indicator>li { 
     display: none !important; 
    } 
} 

但它沒有工作..仍然相同的大小，沒有隱藏。

你能幫我嗎？

編輯：

畫廊的HTML：

    <!-- The Bootstrap Image Gallery lightbox, should be a child element of the document body --> 
       <div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" data-use-bootstrap-modal="false"> 
        <!-- The container for the modal slides --> 
        <div class="slides"></div> 
        <!-- Controls for the borderless lightbox --> 
        <h3 class="title"></h3> 
        <a class="prev">‹</a> 
        <a class="next">›</a> 
        <a class="close">×</a> 
        <a class="play-pause"></a> 
        <ol class="indicator"></ol> 
        <!-- The modal dialog, which will be used to wrap the lightbox content --> 
        <div class="modal fade"> 
         <div class="modal-dialog"> 
          <div class="modal-content"> 
           <div class="modal-header"> 
            <button type="button" class="close" aria-hidden="true">&times;</button> 
            <h4 class="modal-title"></h4> 
           </div> 
           <div class="modal-body next"></div> 
           <div class="modal-footer"> 
            <button type="button" class="btn btn-default pull-left prev"> 
             <i class="glyphicon glyphicon-chevron-left"></i> 
             Previous 
            </button> 
            <button type="button" class="btn btn-primary next"> 
             Next 
             <i class="glyphicon glyphicon-chevron-right"></i> 
            </button> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 

      <div class="row"> 
       <div id="event" class="col-md-12"> 
       <h3 class="page-header heading-primary-a">Events & Bands</h3> 
        <a href="img/gallery/event_01.jpg" title="Events & Bands" data-gallery="#blueimp-gallery-event"> 
         <img src="img/gallery/event_thumb.jpg" class="device" alt="Events & Bands"> 
        </a> 
        <a href="img/gallery/event_02.jpg" title="Events & Bands" data-gallery="#blueimp-gallery-event"> 
         <img src="img/gallery/event_02.jpg" alt="Events & Bands" class="hidden"> 
        </a> 
        <a href="img/gallery/event_03.jpg" title="Events & Bands" data-gallery="#blueimp-gallery-event"> 
         <img src="img/gallery/event_03.jpg" alt="Events & Bands" class="hidden"> 
        </a> 
        <a href="img/gallery/event_04.jpg" title="Events & Bands" data-gallery="#blueimp-gallery-event"> 
         <img src="img/gallery/event_04.jpg" alt="Events & Bands" class="hidden"> 
        </a> 
        <a href="img/gallery/event_05.jpg" title="Events & Bands" data-gallery="#blueimp-gallery-event"> 
         <img src="img/gallery/event_05.jpg" alt="Events & Bands" class="hidden"> 
        </a> 
        <a href="img/gallery/event_06.jpg" title="Events & Bands" data-gallery="#blueimp-gallery-event"> 
         <img src="img/gallery/event_06.jpg" alt="Events & Bands" class="hidden"> 
        </a> 
        <a href="img/gallery/event_07.jpg" title="Events & Bands" data-gallery="#blueimp-gallery-event"> 
         <img src="img/gallery/event_07.jpg" alt="Events & Bands" class="hidden"> 
        </a> 
        <a href="img/gallery/event_08.jpg" title="Events & Bands" data-gallery="#blueimp-gallery-event"> 
         <img src="img/gallery/event_08.jpg" alt="Events & Bands" class="hidden"> 
        </a> 
        <a href="img/gallery/event_09.jpg" title="Events & Bands" data-gallery="#blueimp-gallery-event"> 
         <img src="img/gallery/event_09.jpg" alt="Events & Bands" class="hidden"> 
        </a> 
        <a href="img/gallery/event_10.jpg" title="Events & Bands" data-gallery="#blueimp-gallery-event"> 
         <img src="img/gallery/event_10.jpg" alt="Events & Bands" class="hidden"> 
        </a> 
       </div> 
      </div> 

Answer 1

隨着該HTML，你用錯了CSS選擇目標。與下面

@media (max-width:992px) { 
    #events .page-header img { 
    width: 10px; 
    height: 10px; 
    } 
} 

儘量請避免的!important的使用情況和使用上述CSS所有CSS加載後。