title: FlexImages Justified grid image size on mobile
body: <p>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)</p>
  
  <p>jQuery Fleximage plugin: <a href="https://goodies.pixabay.com/jquery/flex-images/demo.html" rel="nofollow noreferrer">https://goodies.pixabay.com/jquery/flex-images/demo.html</a></p>
  
  <p>Code:</p>
  
  <pre><code>&lt;div style="max-width:908px;margin:auto;padding:0 10px 10px"&gt;
      &lt;div id="demo1" class="flex-images"&gt;
          &lt;div class="item" data-w="219" data-h="180"&gt;&lt;img src="http://placehold.it/219x180.jpg"&gt;&lt;/div&gt;
          &lt;div class="item" data-w="279" data-h="180"&gt;&lt;img src="http://placehold.it/279x180.jpg"&gt;&lt;/div&gt;
          &lt;div class="item" data-w="270" data-h="180"&gt;&lt;img src="http://placehold.it/270x180.jpg"&gt;&lt;/div&gt;
          &lt;div class="item" data-w="270" data-h="180"&gt;&lt;img src="http://placehold.it/270x180.jpg"&gt;&lt;/div&gt;
          &lt;div class="item" data-w="147" data-h="180"&gt;&lt;img src="http://placehold.it/147x180.jpg"&gt;&lt;/div&gt;
          &lt;div class="item" data-w="276" data-h="180"&gt;&lt;img src="http://placehold.it/276x180.jpg"&gt;&lt;/div&gt;
          &lt;div class="item" data-w="319" data-h="180"&gt;&lt;img src="http://placehold.it/319x180.jpg"&gt;&lt;/div&gt;
          &lt;div class="item" data-w="270" data-h="180"&gt;&lt;img src="http://placehold.it/270x180.jpg"&gt;&lt;/div&gt;
          &lt;div class="item" data-w="290" data-h="180"&gt;&lt;img src="http://placehold.it/290x180.jpg"&gt;&lt;/div&gt;
          &lt;div class="item" data-w="305" data-h="180"&gt;&lt;img src="http://placehold.it/305x180.jpg"&gt;&lt;/div&gt;
          &lt;div class="item" data-w="240" data-h="180"&gt;&lt;img src="http://placehold.it/240x180.jpg"&gt;&lt;/div&gt;
          &lt;div class="item" data-w="270" data-h="180"&gt;&lt;img src="http://placehold.it/270x180.jpg"&gt;&lt;/div&gt;
          &lt;div class="item" data-w="283" data-h="180"&gt;&lt;img src="http://placehold.it/283x180.jpg"&gt;&lt;/div&gt;
          &lt;div class="item" data-w="271" data-h="180"&gt;&lt;img src="http://placehold.it/271x180.jpg"&gt;&lt;/div&gt;
          &lt;div class="item" data-w="258" data-h="180"&gt;&lt;img src="http://placehold.it/258x180.jpg"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code>$('#demo1').flexImages({rowHeight: 160}); 
  </code></pre>
  
  <p>i created a jsfiddle and you can see it from below link</p>
  
  <p><a href="https://jsfiddle.net/1kgs3soc/" rel="nofollow noreferrer">https://jsfiddle.net/1kgs3soc/</a></p>
  
  <p>I try adding below css but no luck. </p>
  
  <pre><code>@media (max-width:550px) {
  .flex-images &gt; div.item {
      display: block;
      width: 100%;
  }
  }
  </code></pre>
  
  <p>I tried all the css tricks that i can think of but nothing helped. Can any one point me out how to do this?</p>
  
  <p>Regards</p>