immagini a capo su visualizzione mobile

[stebo85]

Una tabella a tre colonne non si ridurrà mai a 1 colonna automaticamente.
Senza seguire tutte le regole del responsive puoi mettere le immagini e il relativo testo dentro a dei div (una per div) dandogli un float:left in modo da affiancarne tre, riducendo la risoluzione i div seguiranno il flusso della pagina e andranno a capo come vuoi tu

Grazie, mi hai aperto un po' la mente.

Ho cercato e creato questo:

<div id="container">
<ul id="griglia">
   <li><img class="flex" src="https://www.emporiodelloscooter.com/fileeds/RMS/CA-RMS-0006-0001.jpg"></li>
   <li><img class="flex" src="https://www.emporiodelloscooter.com/fileeds/RMS/CA-BS-0000.jpg"></li>
   <li><img class="flex" src="https://www.emporiodelloscooter.com/fileeds/RMS/D0-110.jpg"></li>
   <li><img class="flex" src="https://www.emporiodelloscooter.com/fileeds/RMS/CA-RMS-0001.jpg"></li>
   <li><img class="flex" src="https://www.emporiodelloscooter.com/fileeds/RMS/CA-RMS-0000.jpg"></li>
   <li><img class="flex" src="https://www.emporiodelloscooter.com/fileeds/RMS/D0-032017.JPG"></li>
   <li><img class="flex" src="https://www.emporiodelloscooter.com/fileeds/RMS/CA-RMS-0001.jpg"></li>
</ul>
</div>

con css:

#griglia > li {
  border: 2px solid #333333;
  display: inline-block;
  width:  160px;
  height: 160px;
  margin: 10px;
  background-color: #abe2ff;
}
#container {
    background: #e3e3e3;
    max-width:850px;
    margin:0 auto;
    padding: 20px;
    text-align: center;
}

Trovo solo una difficoltà, che è quella che non riesco a dare uno spazio tra le righe che si creano, lo spazio sta solo fra immagine in orizzontale, ma non in verticale, secondo me c'è un conflitto con il css del sito, potete aiutarmi?

THX