Question

I have the following code I want to be able to reduce the gap between the thumbnail image and the description list inside each list view.

my css

.myParagraph.ui-li-desc {
      color:#333;
      overflow:show;
      white-space:normal;
      height:28px;
      margin-bottom:0px;
    } 

my markup

 listitems_markup = '<li><img src="' + itemThumbnail + '"><div class="myParagraph"><ul data-inline="true" style="font-size:60%; font-weight:normal;"><li style="white-space:normal">You viewed ' + itemName + '</li><li style="white-space:normal">You spent '+itemTimeSpent+' on this activity</li><li style="white-space:normal">You '+itemRating+' this item</li><p class="ui-li-aside">'+itemViewedTime+'</p></ul></div></li>';

this is what it looks like

enter image description here

Was it helpful?

Solution

You might want to reduce the left padding for the list which is automatically set by most browsers.

ul{
padding-left:10px; //do not set this to 0 because of the list marks
border-left:0px;
margin-left:0px;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top