Lista de produtos não responsiva.....

estou aprendendo css e html ainda,  estou fazendo um site para praticar, porem to apanhando muito.

Estou puxando do meu banco de dados o nome dos meus produtos juntamente com as suas imagens, para fazer uma lista visual simples ao usuario do que esta no banco.

porem quando eu diminuo a tela para simular o site em um smarthphone todos os elementos ficam distorcidos...... alguem poderia me ajudar ??????? so falta isso para terminar....

LISTA & PHP:

	                <main>

	                

	                    

	    <div id="listagem_produtos2">

	      <?php while($linha=mysqli_fetch_assoc($resultado)) {   ?>

	                    

	                <ul>

	                    

	                    <li><?php echo $linha["nome_produto"]?></li>

	                    <li>

	                        

	                        <img  class="img-responsive"  height="200" width="200" src="<?php echo $linha["imagem_produto"]?>          "  >

	                             

	                             

	                                </li>

	                    

	                    </ul>

	                

	            <?php } ?>

	                

	                

	                

	              </div>

	                

	                </main>

	             

	 

	 

	 

	 

	 

	 

	 

	 

	 

	 

	 

	CSS:

	 

	          /* estilos da listagem */

	main div#listagem_produtos2 {

	    width:860px;

	    margin:0 auto;

	    grid-template-columns: auto;

	}

	main div#listagem_produtos2 ul {

	    float:left;

	    margin:5px 1px 1px;

	    padding:30px;

	    width:210px;

	    height: 300px;

	}

	main div#listagem_produtos2 li {

	    font-family: sans-serif;

	    font-size: 12px;

	    list-style: none;

	}

	main div#listagem_produtos2 li.imagem {

	    float:left;

	    margin-right: 100px;

	}

	main div#listagem_produtos2 li h3 {

	    margin:10;   

	}

	main div#listagem_produtos2 li img {

	    border:1px solid #ddd;   

	}