Jordyn Jordyn - 1 month ago 7
CSS Question

FlexImages Justified grid image size on mobile

I'm using FlexImages jquery plugin for Justified grid. It works great. Only issue i have is i want the images to be 100% width on mobile (view port 550px or less)

jQuery Fleximage plugin: https://goodies.pixabay.com/jquery/flex-images/demo.html

Code:

<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});


i created a jsfiddle and you can see it from below link

https://jsfiddle.net/1kgs3soc/

I try adding below css but no luck.

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


I tried all the css tricks that i can think of but nothing helped. Can any one point me out how to do this?

Regards

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

}

try using this media query

Comments