For my website gallery i'm using Twitter Bootstrap und the blueimp gallery. It's working fine, but i needed to change the size of the indicator, cause i don't wanted such small circles like in the standard version of the blueimp gallery.
Thats what it normally look like:
And thats my version:
So you see, the indicator is bigger on my version. I like that, cause you have a better look on all pictures in my gallery.
But now the problem:
Whey i open the my gallery on a mobile device, the indicator is to big.. Take a look on this example:
Now i tried to change it via Media Query like this:
@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;
}
}
or this:
@media(max-width:768px) {
.blueimp-gallery>.indicator>li {
display: none !important;
}
}
@media(max-width:992px) {
.blueimp-gallery>.indicator>li {
display: none !important;
}
}
But it didn't work.. Still the same size and no hiding.
Could you help me?
EDIT:
The HTML of the gallery:
<!-- 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">×</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>
With that HTML, You are targeting with wrong CSS selectors. Try with the below
Please avoid the usage of
!important
and use the above CSS after all the CSS is loaded.