I created a jquerymobile application. I added the thumbnail listview using the following code but the problem is that the listview is responsive horizontally but not vertically. I want it to shrink the size vertically too if the device screen is smaller.
<ul data-role="listview" data-inset="true">
<li><a href="#upcoming-Events" data-transition="none"> <img src="img/UpcomingEvents.png"> <h3> Upcoming Events </h3> <p> The BDAU upcoming events </p></a></li>
<li><a href="#data-services" data-transition="none"> <img src="img/data-services.png"> <h3> Data Services </h3> <p> Details of the dataset maintained and provided to the researchers </p></a></li>
<li><a href="#application-services" data-transition="none"> <img src="img/software.png"> <h3> Application Services </h3> <p> Details of the software support provided to the researchers </p></a></li>
<li><a href="#privacy-policy" data-transition="none"><img src="img/data-security.png"> <h3> Privacy policy </h3> <p> Privacy is one of the top priority at BDAU. Read more </p></a></li>
<li><a href="bdauStaff.html" data-transition="none" rel="external"> <img src="img/staff.png"> <h3> Staff profiles </h3> <p> Data scientists working in BDAU </p></a></li>
<!--<li><a href="#about" data-transition="none"><img src="img/bdau.png"><h3> About BDAU </h3> <p> All you want to know about BDAU </p></a></li>-->
<li><a href="#feedback-form" data-transition="none"><img src="img/feedback.png"><h3> Feedback form </h3> <p> Give us your feedback, comments and suggestions </p></a></li>
</ul>