problemi di li nei device mobile

[liviasettantuno]

Buongiorno!
Chiedo supporto a qualche esperto che possa spiegarmi il problema..
Sto realizzando un sito in html5 e responsive design. Va tutto abbastanza bene per cui tra poco lo dovrei mettere on line, ma c'è una pagina che mi crea qualche grattacapo. Si tratta del portfolio dove c'è un elenco di li con incluse immagini.
Questo elenco di li si vede bene dalla risoluzione 768px in poi ma scendendo, i[*] più esterni mi "crollano" pur stando tutti all'interno dello stesso <ul>.

Il problema non si vede se simulo la visione responsive da firefox su desktop, ma si vede sui device mobile (ho provato sia su s3mini, su iphone e su tablet 7 pollici).

La pagine incriminata è: http://www.graf.roma.it/html52/portfolio.html

Le regole le ho impostate nella media query del 320px e sono

.gallery  {
	padding: 0px;
	width:100%;
	}

.gallery ul {
	list-style: none; 
	}
	
.gallery ul li { 
	display: inline; 
	}
	
.gallery ul img {
	margin:0px 10px 10px 0px;
	float:left;
	width:80px; height:80px;
	border: #9F0139 3px solid;
	}

.gallery ul a:hover img {border: 3px solid #f60;}

il codice invece dei vari[*] in html è:

[*][img]images/portfolio/oliveri.jpg[/img]

Grazie!!

[mexican]

hai provato a levare le dimensioni all img? width:80px; height:80px;

[liviasettantuno]

niente da fare.. ho provato sia a dare width =auto e height =auto e poi a togliere sia width che height, ma la situazione peggiora (si può vedere on line)

[mexican]

.gallery ul li img {
margin:0px 10px 10px 0px;
float:left;
width:80px; height:80px;
border: #9F0139 3px solid;
}

Aggiungi li e leva float left alle immagini. Basta che sia li float

[liviasettantuno]

Era proprio quello che mi creava disordine!!!
Ti sei appena aggiudicato un grosso bacio virtuale sulla guancia!!!

[mexican]

Originariamente inviato da liviasettantuno
Era proprio quello che mi creava disordine!!!
Ti sei appena aggiudicato un grosso bacio virtuale sulla guancia!!!

:-) mi fa piacere esserti stato utile.