Jump to content
Solo

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

Recommended Posts

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

 

tai.png

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Kellyfer
      Ola estou tentando publicar imagens multilas usando o comando FOR mas nao estou acertando, alguem poderia me ajudar??
      /*script*/
      <?php 
      date_default_timezone_set('America/Sao_Paulo');
      session_start();?> 
      <!DOCTYPE html>
      <html lang="pt-br">
      <head>
          <meta charset="utf-8">
          <title>Upload de Imagens</title>
      </head>
      <body>
      <!--FORMULÁRIOS-->
      <form action="upload.php" method="post" enctype="multipart/form-data">
          <input type="file" name="arquivos[]" multiple required>
          <input type="submit" value="Publicar">
      </form>
      <p>
      <?php 
      if(isset($_SESSION['erro'])):
          echo $_SESSION['erro'];
          session_unset();
      elseif(isset($_SESSION['sucesso'])):
          echo $_SESSION['sucesso'];
          session_unset();
      endif;
      ?>
      </p>
      <?php 
      /*MOSTRANDO AS IMAGENS NA TELA*/
      $utf8 = header("content-type:text/html;charset= utf-8");
      $conn = new mysqli('localhost','thesim','xthesimx1986','db_galeria');
      $conn->set_charset("utf8");
      $busca_image = "SELECT id, nome_arquivo FROM tb_upload  ORDER BY id DESC";
      $res = mysqli_query($conn, $busca_image);
       if(mysqli_num_rows($res) <= '0'){
           echo "Nenuma imagem encontrada!";
       }else{
           while($res_pos =mysqli_fetch_array($res)){
               $nome_arquivo    =$res_pos[0];
      for($c=0; $c>=10; $c++);
      print "<div class='foto'><img src='uploads/$nome_arquivo$c</div>";
      }
      }
      ?>
      </body>
      </html>
      Imagens anexadas



    • By tatysouzac
      Minha view:
      <div>                            
                                          <form method="post" action="http://localhost/integradorcode/index.php/welcome/validar">
                                          EMAIL: <input type="text" name="email"  /> <br><br>
                                          SENHA:  <input type="password" name="senha"/> <br><br><br><br>
                                          <input class="myButton" type="submit" value="Entrar"/> <br><br>
                                          </form>
                                          <a href="Cadastro.php" class="myButton">Cadastrar</a><br><br>
                                          <a href="#" class="myButton">Esqueceu sua senha?</a>
               </div>
       
       
       
      Controller:
       
          public function validar(){
              //var_dump($_POST);
              $this->load->model("Cadastro_model");
              $result = $this->Cadastro_model->validar($_POST["email"],md5($_POST["senha"]));
              var_dump($result);
          }
       
       
      Model:
       
          function validar($email, $senha){
              return $this->db->query("SELECT * FROM `cadastro_clientes` WHERE email_cliente = '{$email}'  AND senha_cliente = '{$senha}' AND status = 1 LIMIT 1")->result_array();
          }
       
       
      Não da nenhuma mensagem de erro mas coloco senha e login certos do meu bd e o return não retorna nada array 0 
    • By MateusOFCZ
      Olá, estou desenvolvendo um projeto de registro de clientes em java no netbeans e usando o MySQL Workbench e Xampp, gostaria de saber se é possível fazer com que o programa fique verificando se está conectado com o banco de dados, e caso não esteja ele mostra uma mensagem pedindo para o usuário se conectar em uma rede, caso ele se conecte o programa irá esconder essa mensagem e funcionará normalmente.

      Eu consegui fazer com que ele mostre se está conectado ou não, porém se eu desligar o servidor ele não atualiza mostrando que está offline, ele continua como online...
    • By terra
      Olá,
       Tenho esse codigo
       
      e gostaria de chamar  bairro = dados.address.suburb; aqui nesse função 
       
       
      Agradeço qualquer ajuda
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.