Jump to content
Sign in to follow this  
Gabriel Orlando

Responsivo - Quebrando layout dos produtos

Recommended Posts

Pessoal, boa tarde!

Estou com um problema, nesse site aqui eu coloquei os produtos para exibirem em 4 colunas, porém, ele quebra o layout e só aparece 3, pois, provavelmente o width não é suficiente para colocar todos os produtos, além disso, quando eu vejo no responsivo, ele não faz um alinhamento dos produtos da coluna debaixo, por exemplo, na primeira linha tem os 4 produtos, depois, quando eu diminuir a tela, ele desce pra 3, 2 e depois 1 (de acordo com o tamanho), mas os produtos da linha debaixo, não sao alinhados com os da primeira...

 

Alguém pode me ajudar? Dar uma dica ou alguma coisa?

 

Obrigado!

Share this post


Link to post
Share on other sites

cara, dei uma olhada, e creio que a causa possa ser o espaçamento entre cada item do produto. por exemplo: a classe .spacer tem um padding, a classe .product tem outro... as classes .vm-col e .vm-col-4 estão sendo sobre-escritas...

 

eu te daria como sugestão colocar os itens dentro das colunas do próprio booststrap... dae tu poderia separar 4 itens em colunas de 3... ou 3 itens em colunas de 4 dae reduziria o tamanho do item para caber dentro das colunas, teria que ver o que dentro das possibilidades seria mais fácil e com menor mudança de código

  • +1 1

Share this post


Link to post
Share on other sites

Hum, é uma boa, porém, creio que vai continuar sem mostrar 3 produtos por linha... vi continuar mostrando

3 - 1... 3 - 1... 3 -1... isso eu resolvo com display inline, eu acho, porém eu não consigo enfiar ele em algum lugar que me de um resultado...

Share this post


Link to post
Share on other sites

meu testei aqui no console do chrome... coloquei as classes do bootstrap (span e col-md) e não funcionaram, as outras regras devem sobreescrever alguma coisa. dae na .row, deixei apenas a regra product e span3

<div class="product span3">
.....
</div>

e tirei a largura mínima do div.product (min-width: 220px;) e dae alinhou os 4 divs... testei até 1024x768 e deu certo e menor que isso ica um só.

 

quem sabe tu testa isso, a largura do div.product pode ser a chave do bagulho.

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
Sign in to follow this  

  • Similar Content

    • By Lucas Trindade
      Boa noite galera!
       
      Estou desenvolvendo um site em Bootstrap e surgiu uma dúvida afinal nunca desenvolvi um layout desta forma.
       
      Na foto anexada os 3 cards estão deslocados para baixo do container e isto faz com que a seção seguinte dos cards fique em cima deles por conta deste deslocamento.
       
      Não sei se fui bem claro mas, como eu arrumaria isso? 
       
      Preciso desenvolver este site para enviar para uma empresa. Alguém poderia me ajudar? Se for necessário envio o arquivo com o site inteiro.Obrigado
    • By joicitias
      Olá, 
      Estou aprendendo a programar ainda, e preciso fazer com que ao clicar em um botão o  conteúdo selecionado de um select seja copiado para uma textarea. 
       
       

    • By teusinhorossi
      Fala galera boa noite! Sou iniciante no HTML e CSS e tô aprendendo sozinho. Acontece que, to criando um site meu pra aprender e ver se consigo usar ele como um "curriculo".

      O problema é que agora que estou modelando ele para celular, a maldita barra do eixo y da tela não desaparece.
       
      Sei que talvez seja um erro bobo, mas estou há umas 3h e não consigo achar meu problema.
       
      Na primeira screenshot a tela, e na segunda o resto cinza que fica. O body do site está na cor cinza, mas quando começo a editar as coisas dentro do @media e tento mudar o tamanho dele por lá ou qualquer outra coisa não estou conseguindo... Desde já abraços e boa notie!
       


    • By xdxddxd
      Galera neste site aqui tem umas setas em um accordion, e eu gostaria de saber como faço para elas se movimentarem a cada clique.
      se alguem conseguir algum link com tutorial ou me passar algum script eu sou imensamente agradecido.
      estou usando o accordion padrão do bootstrap 4+
      Clique neste: Exemplo
    • By Mauricio Molina
      Ola,
       
      Podem me dar uma força, estou elaborando um dashord onde terá algumas funções, uma delas é chamar uma listagem de usuário no banco.
       
      Preciso chamar o css e js para o menu e a tabela.
       
      Sei que é fácil mas sinceramente me perdi, alguém pode dar uma força para chamar os arquivos.
       
      Seguem as imagem de como fica a página
       
      MENU:
       
      <link href="css/bootstrap.css" rel="stylesheet"> <link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet"> <link href="css/theme.css" rel="stylesheet"> <script src="js/ie-emulation-modes-warning.js"></script> Tabelas
       
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> Como chamo tudo junto sem um interferir no outro?
       
      No aguardo...
       
      Obrigado!
       
       
       
       
×

Important Information

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