Currently utilizing the FlexImages jQuery plugin for a Justified grid, which is performing well. The only issue I am encountering is the desire for the images to span 100% width on mobile devices (viewport of 550px or less).
If interested in checking out the jQuery FlexImage plugin, you can view it here:
Below is the code snippet:
<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>
</div>
For JavaScript functionality, use the following code:
$('#demo1').flexImages({rowHeight: 160});
A JSFiddle has been created for demonstration purposes at this link:
https://jsfiddle.net/1kgs3soc/
Despite attempting various CSS modifications, no success was achieved. The following code snippet was added but yielded no results:
@media (max-width:550px) {
.flex-images > div.item {
display: block;
width: 100%;
}
}
If anyone has insights on how to resolve this issue and make the images display as desired on mobile screens, please provide guidance.
Best regards,