FlexImages Обоснованный размер сетки на мобильном телефоне

Question

Я использую плагин jQuery FlexImages для оправданной сетки. Он отлично работает. Только вопрос у меня есть, я хочу изображения, чтобы быть шириной на мобильный (вид порта 550px или меньше)

JQuery Fleximage плагин 100%: https://goodies.pixabay.com/jquery/flex-images/demo.html

Код:

<div style="max-width:908px;margin:auto;padding:0 10px 10px"> 
    <div id="demo1" class="flex-images"> 
     <div class="item" data-w="219" data-h="180"><img src="http://placehold.it/219x180.jpg"></div> 
     <div class="item" data-w="279" data-h="180"><img src="http://placehold.it/279x180.jpg"></div> 
     <div class="item" data-w="270" data-h="180"><img src="http://placehold.it/270x180.jpg"></div> 
     <div class="item" data-w="270" data-h="180"><img src="http://placehold.it/270x180.jpg"></div> 
     <div class="item" data-w="147" data-h="180"><img src="http://placehold.it/147x180.jpg"></div> 
     <div class="item" data-w="276" data-h="180"><img src="http://placehold.it/276x180.jpg"></div> 
     <div class="item" data-w="319" data-h="180"><img src="http://placehold.it/319x180.jpg"></div> 
     <div class="item" data-w="270" data-h="180"><img src="http://placehold.it/270x180.jpg"></div> 
     <div class="item" data-w="290" data-h="180"><img src="http://placehold.it/290x180.jpg"></div> 
     <div class="item" data-w="305" data-h="180"><img src="http://placehold.it/305x180.jpg"></div> 
     <div class="item" data-w="240" data-h="180"><img src="http://placehold.it/240x180.jpg"></div> 
     <div class="item" data-w="270" data-h="180"><img src="http://placehold.it/270x180.jpg"></div> 
     <div class="item" data-w="283" data-h="180"><img src="http://placehold.it/283x180.jpg"></div> 
     <div class="item" data-w="271" data-h="180"><img src="http://placehold.it/271x180.jpg"></div> 
     <div class="item" data-w="258" data-h="180"><img src="http://placehold.it/258x180.jpg"></div> 
    </div> 
</div> 

JavaScript

$('#demo1').flexImages({rowHeight: 160}); 

Я создал jsfiddle, и вы можете видеть это из-под ссылки

https://jsfiddle.net/1kgs3soc/

Я стараюсь добавить ниже css, но не повезло.

@media (max-width:550px) { 
.flex-images > div.item { 
    display: block; 
    width: 100%; 
} 
} 

Я пробовал все трюки css, о которых я могу думать, но ничего не помогло. Может ли кто-нибудь указать мне, как это сделать?

С уважением

Answer 1

@media only screen and (max-width: 550px) { 
    .flex-images .item { 
    width: 100% !important; 
    } 
    .flex-images .item img { 
    width: 100%; 
    } 

} 

попробуйте использовать этот носитель запрос

Answer 2

Попробуйте использовать, как это,

@media (max-width:550px) { 
.flex-images > div.item { 
    display: block; 
    width: 100% !important; 
} 
.flex-images > div.item img { 
    width: 100%; 
} 
}