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

[Solo 0]

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;   
}
  
 

 

[Pitter Rezende da Silva 1]

Você está trabalhando com valores fixos como "width:860px;" e assim quando você diminui a tela o conteúdo continua com o mesmo tamanho.

Para se criar um site responsivo eu sempre declaro valores dinâmicos utilizando porcentagem ex: "width:20%;", pois assim o conteúdo irá ocupar sempre 20% do tamanho total daquela tela ou daquela div especifica.

Veja o exemplo abaixo:

 

<div class="azul">
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
        <div class="verde">
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>

 

 

 

 

body{
    margin: 0;
    padding: 0;
    background: red;
  }

  .azul p{
    background: blue;
    display: block;
    width: 70%;
    margin: 0 auto;
  }
  .verde p{
    background: green;
    width: 70%;
    margin: 0 auto;
  }