How to change listview to Tile view in jquery mobile PhoneGap application?

[MCCAIN08]

I am trying to implement listview which gets changed to a tile view as shown hereand explained hereThe example works well and I am trying to implement only the first breakpoint which occurs after 768 pixelsI am populating my listview using Ajax which works really well as below:\[code\]$.ajax({ url: 'http://example.com/query.php', dataType: 'jsonp', jsonp: 'jsoncallback', timeout: 5000, success: function(data, status){ //hide the page loader $.mobile.hidePageLoadingMsg(); $.each(data, function(i,data){ $('#output').children('ul').append('<li><a data-ajax="false" href="http://stackoverflow.com/questions/15652727/itemdetails.html?id='+data.id+'&title='+data.title+'&itemDate='+data.itemDate+'&description='+data.description+'&dialect='+data.dialect+'&dimension='+data.dimension+'&tag='+data.tag+'"><img src="http://example.com/images/'+data.id+'.jpg"</img><h4>'+data.title+'</h4><p>'+data.itemDate+'</p> <p class="ui-li-aside">'+data.dialect+'</p></a></li>'); }); $('#itemList').listview('refresh'); //hide the page loader $.mobile.hidePageLoadingMsg(); return false; }, error: function(){ output.text('There was an error loading the data. Please check your internet connection.'); //hide the page loader $.mobile.hidePageLoadingMsg(); return false; }});\[/code\]But after 768 pixels, which is the first break-point the listview remains and is distorted.The only difference is that size of my images is as follows:198px