How do I adjust the spacing around the sides of list items in jquery mobile

Question

I have a list of things like this:

 <ul data-role="listview" data-theme="c">
     <li><item 1/li>
     <li>item 2</li>
 </ul>

However, the sides of this keep stretching to the very end of the page. How could I add some kind of padding around the edges like in the api example found here: http://jquerymobile.com/demos/1.2.0/docs/lists/lists-nested.html

I know I can add some css that would ajust the margin, However I don't want this to be added when viewing the page on a cell phone Thanks

Answer 1

Well you can go with a standard solution:

<ul data-role="listview" data-theme="c" data-inset="true">
    <li><item 1/li>
    <li>item 2</li>
</ul>

Or you can go all commando like this:

.ui-listview {
    margin: 20px !important;
}

Working example: http://jsfiddle.net/Gajotres/2PhBQ/